Add layer option to node edit control

To close #27

README.md

@@ -7,6 +7,7 @@ map web page for plotting "things" on.
 ![Map Image](https://dceejay.github.io/pages/images/redmap.png)
 
 ### Changes
+ - v1.1.4 - Let layer control be visible or not
  - v1.1.3 - more typos.
  - v1.1.1 - fix adding layer to embedded map in iframe
  - v1.1.0 - Move to sockjs (smaller than socket.io). Remove layers that are no longer served for free, Issue #24. Remove polygons as well as markers on timeout.

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.1.3",
+    "version"       : "1.1.4",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "^4.15.0",

worldmap.html

@@ -50,12 +50,20 @@
     Remove markers after <input type="text" id="node-input-maxage" style="width:67px;"> seconds
 </div>
 <div class="form-row">
-    <label for="node-input-usermenu"><i class="fa fa-user"></i> User Menu</label>
+    <label for="node-input-usermenu"><i class="fa fa-user"></i> User menu</label>
     <select id="node-input-usermenu" style="width:70px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
-    <i class="fa fa-arrows-alt" style="margin-left:50px"></i> Auto-pan <select id="node-input-panit" style="width:70px;">
+    &nbsp; <i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
+    <select id="node-input-layers" style="width:70px;">
+        <option value="show">Show</option>
+        <option value="hide">Hide</option>
+    </select>
+</div>
+<div class="form-row">
+    <label for="node-input-panit"><i class="fa fa-arrows-alt"></i> Auto-pan</label>
+    <select id="node-input-panit" style="width:70px;">
         <option value="false">False</option>
         <option value="true">True</option>
     </select>
@@ -114,6 +122,7 @@
             cluster: {value:""},
             maxage: {value:""},
             usermenu: {value:"show"},
+            layers: {value:"show"},
             panit: {value:"false"}
         },
         inputs:1,
@@ -137,7 +146,6 @@
     });
 </script>
 
-
 <script type="text/x-red" data-template-name="worldmap in">
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-file"></i> Name</label>

worldmap.js

@@ -36,6 +36,7 @@ module.exports = function(RED) {
         this.maxage = n.maxage || "";
         this.showmenu = n.usermenu || "show";
         this.panit = n.panit || "false";
+        this.layers = n.layers || "show";
         var node = this;
         var clients = {};
         //node.log("Serving map from "+__dirname+" as "+RED.settings.httpNodeRoot.slice(0,-1)+"/worldmap");
@@ -59,6 +60,7 @@ module.exports = function(RED) {
                     if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
                     c.showmenu = node.showmenu;
                     c.panit = node.panit;
+                    c.showlayers = node.layers;
                     client.write(JSON.stringify({command:c}));
                 }
             });

worldmap/index.html

@@ -122,6 +122,8 @@ var ibmfoot = " © IBM 2015,2017"
 var initialposition = false;
 var inIframe = false;
 var showUserMenu = true;
+var showLayerMenu = true;
+var layercontrol;
 var ws;
 
 // Create the socket
@@ -198,7 +200,6 @@ if (window.self !== window.top) {
     (document.getElementById("bars").style.display="none");
     (document.getElementById("menu").style.right="8px");
     (document.getElementById("menu").style.borderRadius="6px");
-    if (showUserMenu) { menuButton.addTo(map); }
 }
 else {
     console.log("NOT in an iframe")
@@ -233,6 +234,7 @@ if (!inIframe) {
         heat.setLatLngs([]);
     }, "Clears the current heatmap", "bottomright");
 }
+//else { if (showUserMenu) { menuButton.addTo(map); } }
 
 // Handle the dialog for popup help
 var dialog = document.querySelector('dialog');
@@ -696,12 +698,13 @@ if ( window.localStorage.hasOwnProperty("lastlayer") ) {
 }
 basemaps[baselayername].addTo(map);
 
-// Add the layers control widget
-if (!inIframe) {
-    var layercontrol = L.control.layers(basemaps, overlays).addTo(map);
-}
 // Layer control based on select box rather than radio buttons.
 //var layercontrol = L.control.selectLayers(basemaps, overlays).addTo(map);
+layercontrol = L.control.layers(basemaps, overlays);
+
+// Add the layers control widget
+if (!inIframe) { layercontrol.addTo(map); }
+else { showLayerMenu = false;}
 
 // Delete a marker (and notify websocket)
 var delMarker = function(dname) {
@@ -745,9 +748,9 @@ function setMarker(data) {
             //zoomToBoundsOnClick:false
         }).addTo(map);
         overlays[lay] = layers[lay];
-        if (!inIframe) {
+        //if (!inIframe) {
             layercontrol.addOverlay(layers[lay],lay);
-        }
+        //}
     }
 
     if (typeof markers[data.name] != "undefined") { layers[lay].removeLayer(markers[data.name]); }
@@ -1093,6 +1096,16 @@ function doCommand(cmd) {
             map.addControl(menuButton);
         }
     }
+    if (cmd.hasOwnProperty("showlayers")) {
+        if ((cmd.showlayers === "hide") && (showLayerMenu === true)) {
+            showLayerMenu = false;
+            layercontrol.removeFrom(map);
+        }
+        else if ((cmd.showlayers === "show") && (showLayerMenu === false)) {
+            showLayerMenu = true;
+            layercontrol = L.control.layers(basemaps, overlays).addTo(map);
+        }
+    }
     var existsalready = false;
     // Add a new base map layer
     if (cmd.map && cmd.map.hasOwnProperty("name") && cmd.map.hasOwnProperty("url") && cmd.map.hasOwnProperty("opt")) {
@@ -1110,7 +1123,8 @@ function doCommand(cmd) {
             console.log("New Map:",cmd.map.name);
             basemaps[cmd.map.name] = L.tileLayer(cmd.map.url, cmd.map.opt);
         }
-        if (!existsalready && !inIframe) {
+        //if (!existsalready && !inIframe) {
+        if (!existsalready) {
             layercontrol.addBaseLayer(basemaps[cmd.map.name],cmd.map.name);
         }
     }
@@ -1134,7 +1148,8 @@ function doCommand(cmd) {
         else {
             overlays[cmd.map.overlay] = L.tileLayer(cmd.map.url, cmd.map.opt);
         }
-        if (!existsalready && !inIframe) {
+        //if (!existsalready && !inIframe) {
+        if (!existsalready) {
             layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
         }
         overlays[cmd.map.overlay].addTo(map);

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Sep 6th 2017 - v1.1.3a
+# date: Oct 10th 2017 - v1.1.4 
 
 CACHE:
 index.html