Add local map server capability

README.md

@@ -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
 ---------
 

package.json

@@ -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",

worldmap.html

@@ -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",

worldmap.js

@@ -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);

worldmap/index.html

@@ -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 ((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 (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);
         }

worldmap/worldmap.appcache

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