Add local map server capability

2017-04-20 13:44:19 +01:00 · 2017-04-20 13:44:19 +01:00 · 950264ac13
commit 950264ac13
parent 6dc383c497
6 changed files with 73 additions and 14 deletions
--- a/README.md
+++ b/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.
@ -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
 ---------

--- a/package.json
+++ b/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",
--- a/worldmap.html
+++ b/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",
--- a/worldmap.js
+++ b/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);
--- a/worldmap/index.html
+++ b/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,7 +905,7 @@ 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); }
            }
            markers[data.name] = 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; }
+        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; }
+        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);
        }
--- a/worldmap/worldmap.appcache
+++ b/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