dmxm/node-red-contrib-jwht-map
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add local map server capability

Browse Source
This commit is contained in:
Dave Conway-Jones 2017-04-20 13:44:19 +01:00
parent 6dc383c497
commit 950264ac13
No known key found for this signature in database
GPG Key ID: 81B04231572A9A2D
6 changed files with 73 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
README.md
View File

@ -7,7 +7,8 @@ map web page for plotting "things" on.
![Map Image](https://dceejay.github.io/pages/images/redmap.png)
### Changes
- v1.0.24 - Add `.weblink` property to allow links out to other information. Add more heatmap layer control
- v1.0.26 - Add info on how to use with local WMS server
- v1.0.24 - Add `.weblink` property to allow links out to other information.
- v1.0.23 - Add msg.payload.command.heatmap to allow setting of heatmap config.
- v1.0.22 - Add example how to embed into Node-RED-Dashboard template.
- v1.0.21 - If you specify range and icon then you get a marker and a range circle, if you just specify range with no icon, you just get a circle, and vice versa.
@ -50,7 +51,7 @@ Optional properties include
- **deleted** : set to <i>true</i> to remove the named marker. (default false)
- **addtoheatmap** : set to <i>false</i> to exlcude point from contributing to heatmap layer. (default true)
- **intensity** : set to a value of 0.1 - 1.0 to set the intensity of the point on heatmap layer. (default 1.0)
Any other `msg.payload` properties will be added to the icon popup text box.
@ -133,6 +134,40 @@ To add a new base layer
opt:{ maxZoom:19, attribution:"&copy; OpenStreetMap" }
};
### Using a local Map Server (WMS server)
IMHO the easiest map server to make work is the <a href="http://www.mapserver.org/" target="_new">mapserver</a> package in Ubuntu / Debian. Usually you will start with
sudo apt-get install mapserver-bin cgi-mapserver gdal-bin
Configuring that, setting up your tiles, and creating a .map file is way beyond the scope of this README so I will leave that as an exercise for the reader. Once set up you should have a cgi process you can run called `mapserv`, and a `.map` file that describes the layers available from the server.
Create and edit these into a file called **mapserv**, located in this node's directory, typically
`~/.node-red/node_modules/node-red-contrib-web-worldmap/mapserv`, for example:
#! /bin/sh
# set this to the path of your WMS map file (which in turn points to your tiles)
MS_MAPFILE=~/Data/maps/uk.map
export MS_MAPFILE
# and set this to the path of your cgi-mapserv executable
/usr/bin/mapserv
You can then add a new WMS Base layer by injecting a message like
msg.payload.command.map = {
name: "Local WMS",
url: 'http://localhost:1880/cgi-bin/mapserv', // we will serve the tiles from this node locally.
opt: {
layers: 'gb', // specifies a layer in your map file
format: 'image/png',
transparent: true,
attribution: "© Ordnance Survey, UK"
},
wms: true // set to true for WMS type mapserver
}
Demo Flow
---------

5
package.json
View File

@ -1,10 +1,11 @@
{
"name" : "node-red-contrib-web-worldmap",
"version" : "1.0.24",
"version" : "1.0.26",
"description" : "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies" : {
"express": "^4.15.0",
"socket.io": "^1.7.3"
"socket.io": "^1.7.3",
"cgi": "0.3.1"
},
"repository" : {
"type":"git",

14
worldmap.html
View File

@ -86,11 +86,21 @@
<p>Icons of type <i>plane</i>, <i>ship</i> or <i>car</i> will use built in SVG icons that align to the
<code>bearing</code> value.</p>
<p>There are some <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">extra commands</a>
for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and to <b>control</b> the map remotely.</p>
for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and to <b>control</b> the map remotely, including how to
use a local map server.</p>
</script>
<script type="text/javascript">
RED.keyboard.add("*",/* w */ 87,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+document.location.host+RED.settings.httpNodeRoot+"/worldmap") });
var lnk = document.location.host+RED.settings.httpNodeRoot+"/worldmap";
var re = new RegExp('\/{1,}','g');
lnk = lnk.replace(re,'/');
if (!RED.hasOwnProperty("actions")) {
RED.keyboard.add("*",/* m */ 77,{ctrl:true, shift:true},function() { window.open(document.location.protocol+"//"+lnk) });
}
else {
RED.keyboard.add("*","ctrl-shift-m","Show Map");
RED.actions.add("Show Map",function() { window.open(document.location.protocol+"//"+lnk) });
}
RED.nodes.registerType('worldmap',{
category: 'location',
color:"darksalmon",

2
worldmap.js
View File

@ -34,6 +34,8 @@ module.exports = function(RED) {
var node = this;
//node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
RED.httpNode.use("/worldmap", express.static(__dirname + '/worldmap'));
// add the cgi module for serving local maps....
RED.httpNode.use("/cgi-bin/mapserv", require('cgi')(__dirname + '/mapserv'));
var callback = function(client) {
client.setMaxListeners(0);

25
worldmap/index.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE HTML>
<!--
Copyright 2015, 2016 IBM Corp.
Copyright 2015, 2017 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -118,7 +118,7 @@ var menuOpen = false;
var clusterAt = 12;
var maxage = 600; // default max age of icons on map in seconds - cleared after 10 mins
var baselayername = "OSM grey"; // Default base layer OSM but uniform grey
var ibmfoot = "&nbsp;&copy; IBM 2015,2016"
var ibmfoot = "&nbsp;&copy; IBM 2015,2017"
var initialposition = false;
var inIframe = false;
var showUserMenu = true;
@ -905,8 +905,8 @@ function setMarker(data) {
rightmenuMarker.setLatLng(e.latlng);
map.openPopup(rightmenuMarker);
});
if ((data.addtoheatmap !== "false") || (!data.hasOwnProperty("addtoheatmap"))){ // Added to give ability to control if points from active layer contribute to heatmap
if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(lli); }
if ((data.addtoheatmap !== "false") || (!data.hasOwnProperty("addtoheatmap"))) { // Added to give ability to control if points from active layer contribute to heatmap
if (heatAll || map.hasLayer(layers[lay])) { heat.addLatLng(lli); }
}
markers[data.name] = marker;
layers[lay].addLayer(marker);
@ -982,9 +982,15 @@ function doCommand(cmd) {
var existsalready = false;
// Add a new base map layer
if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
console.log("New map:",cmd.map.name);
if (basemaps.hasOwnProperty(cmd.map.name)) { existsalready = true; }
basemaps[cmd.map.name] = L.tileLayer(cmd.map.url, cmd.map.opt);
if (cmd.map.hasOwnProperty("wms")) { // special case for wms
console.log("New WMS:",cmd.map.name);
basemaps[cmd.map.name] = L.tileLayer.wms(cmd.map.url, cmd.map.opt);
}
else {
console.log("New Map:",cmd.map.name);
basemaps[cmd.map.name] = L.tileLayer(cmd.map.url, cmd.map.opt);
}
if (!existsalready) {
layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
}
@ -993,7 +999,12 @@ function doCommand(cmd) {
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
console.log("New overlay:",cmd.map.overlay);
if (overlays.hasOwnProperty(cmd.map.overlay)) { existsalready = true; }
overlays[cmd.map.overlay] = L.tileLayer(cmd.map.url, cmd.map.opt);
if (cmd.map.hasOwnProperty("wms")) { // special case for wms
overlays[cmd.map.name] = L.tileLayer.wms(cmd.map.url, cmd.map.opt);
}
else {
overlays[cmd.map.overlay] = L.tileLayer(cmd.map.url, cmd.map.opt);
}
if (!existsalready) {
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
}

2
worldmap/worldmap.appcache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST
# date: Mar 4th 2017 - v1.0.24
# date: Apr 19th 2017 - v1.0.26
CACHE:
index.html