add panlock, zoomlock and hiderightclick control options

to close #60

CHANGELOG.md

@@ -1,5 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.5.16 - Allow setting panlock, zoomlock and hiderightclick via commands - Issue #60
+ - v1.5.15 - Allow setting clusterAt to 0 to fully disable it - Issue #61
  - v1.5.14 - Stop delete marker feedback to allow updating multiple maps - Issue #59
  - v1.5.13 - Send click message to websocket on marker click - Issue #56, #57
  - v1.5.11 - Let search also try geocoding lookup if not found in marks.

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.5.16 - Allow setting panlock, zoomlock and hiderightclick via commands - Issue #60
 - v1.5.15 - Allow setting clusterAt to 0 to fully disable it - Issue #61
 - v1.5.14 - Stop delete marker feedback to allow updating multiple maps - Issue #59
 - v1.5.13 - Send click message to websocket on marker click - Issue #56, #57
@@ -231,7 +232,7 @@ All these events generate messages that can be received by using a **worldmap in
 
 ## Control
 
-You can also control the map via the node, by sending in a msg.payload containing a **command** object.
+You can also control the map via the node, by sending in a msg.payload containing a **command** object. Multiple parameters can be specified in one command.
 
 Optional properties include
 
@@ -252,6 +253,9 @@ Optional properties include
    - **bounds** - sets the bounds of an Overlay-Image. 2 Dimensional Array that defines the top-left and bottom-right Corners (lat/lng Points)
  - **heatmap** - set heatmap options object see https://github.com/Leaflet/Leaflet.heat#reference
  - **clear** - layer name - to clear a complete layer and remove from layer menu
+ - **panlock** - lock the map area to the current visible area. - `{command:{panlock:true}}`
+ - **zoomlock** - locks the zoom control to the current value and removes zoom control - `{command:{zoomlock:true}}`
+ - **hiderightclick** - disables the right click that allows adding points to the map - `{command:{hiderightclick:true}}`
 
 #### To switch layer, move map and zoom
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.5.15",
+    "version": "1.5.16",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap.html

@@ -51,19 +51,31 @@
 </div>
 <div class="form-row">
     <label for="node-input-usermenu"><i class="fa fa-user"></i> User menu</label>
-    <select id="node-input-usermenu" style="width:80px;">
+    <select id="node-input-usermenu" style="width:64px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
-    &nbsp; <i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
+    <i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
-    <select id="node-input-layers" style="width:80px;">
+    <select id="node-input-layers" style="width:64px;">
         <option value="show">Show</option>
         <option value="hide">Hide</option>
     </select>
 </div>
+<div class="form-row">
+    <label for="node-input-panlock"><i class="fa fa-lock"></i> Lock map</label>
+    <select id="node-input-panlock" style="width:64px;">
+        <option value="false">False</option>
+        <option value="true">True</option>
+    </select>
+    <i class="fa fa-lock" style="margin-left:30px;"></i> Lock zoom
+    <select id="node-input-zoomlock" style="width:64px;">
+        <option value="false">False</option>
+        <option value="true">True</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:80px;">
+    <select id="node-input-panit" style="width:64px;">
         <option value="false">False</option>
         <option value="true">True</option>
     </select>
@@ -76,7 +88,7 @@
     <label for="node-input-name"><i class="fa fa-file"></i> Name</label>
     <input type="text" id="node-input-name" placeholder="name">
 </div>
-<div class="form-tips">Set clusterAt to 0 to disable.</div><br/>If <i>Path</i> is left empty,
+<div class="form-tips">Set <i>Cluster if</i> to 0 to disable clustering of points.<br/>If <i>Path</i> is left empty,
 then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the map in a new tab.</div>
 </script>
 
@@ -94,7 +106,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
         <li><code>speed</code> : combined with bearing, draws a vector.</li>
         <li><code>bearing</code> : combined with speed, draws a vector.</li>
         <li><code>accuracy</code> : combined with bearing, draws a polygon of possible direction.</li>
-        <li><code>icon</code> : <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_new">font awesome</a> icon name</li>
+        <li><code>icon</code> : <a href="https://fontawesome.com/v4.7.0/icons/" target="_new">font awesome</a> icon name</li>
         <li><code>iconColor</code> : standard CSS color name or #rrggbb hex value.</li>
         <li><code>SIDC</code> : NATO symbology code (instead of icon).</li>
         <li><code>bulding</code> : OSMBuildings GeoJSON object.</li>
@@ -107,7 +119,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
     <p>Any other sub-properties of <code>msg.payload</code> will be added to the icon popup text box as extra information.</p>
     <p>Icons of type <i>plane</i>, <i>ship</i>, <i>car</i>, <i>uav</i> or <i>arrow</i> will use built in SVG icons that align to the
     <code>bearing</code> value.</p>
-    <p>Font Awesome (fa-icons 4.7) can also be used, as can NATO symbology codes (SIDC).</p>
+    <p>Font Awesome (<a href="https://fontawesome.com/v4.7.0/icons/" target="_new">fa-icons 4.7</a>) can also be used, as can NATO symbology codes (SIDC).</p>
     <p>See the <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">README</a> for further
     details and examples of icons and commands 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>
@@ -137,6 +149,8 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
             usermenu: {value:"show"},
             layers: {value:"show"},
             panit: {value:"false"},
+            panlock: {value:"false"},
+            zoomlock: {value:"false"},
             path: {value:"/worldmap"}
         },
         inputs:1,

worldmap.js

@@ -32,8 +32,10 @@ module.exports = function(RED) {
         this.cluster = n.cluster || "";
         this.maxage = n.maxage || "";
         this.showmenu = n.usermenu || "show";
-        this.panit = n.panit || "false";
         this.layers = n.layers || "show";
+        this.panlock = n.panlock || "false";
+        this.zoomlock = n.zoomlock || "false";
+        this.panit = n.panit || "false";
         this.path = n.path || "/worldmap";
         if (this.path.charAt(0) != "/") { this.path = "/" + this.path; }
         if (!sockets[this.path]) {
@@ -63,6 +65,8 @@ module.exports = function(RED) {
                     if (node.maxage && node.maxage.length > 0) { c.maxage = node.maxage; }
                     c.showmenu = node.showmenu;
                     c.panit = node.panit;
+                    c.panlock = node.panlock;
+                    c.zoomlock = node.zoomlock;
                     c.showlayers = node.layers;
                     client.write(JSON.stringify({command:c}));
                 }

worldmap/index.html

@@ -307,7 +307,7 @@ function doHeatAll() {
 var lockit = false;
 var mb = new L.LatLngBounds([[-120,-360],[120,360]]);
 function doLock() {
-    if (lockit) {
+    if (lockit === true) {
         lockit = false;
         mb = new L.LatLngBounds([[-120,-360],[120,360]]);
     }
@@ -595,6 +595,7 @@ map.on('zoomend', function() {
 var rightmenuMap = L.popup({keepInView:true, minWidth:250}).setContent("<b>Add marker</b><br><input type='text' id='rinput' autofocus onkeydown='if (event.keyCode == 13) addThing();' placeholder='name (,icon, layer, colour)'/>");
 
 var rclk;
+var hiderightclick = false;
 var addThing = function() {
     var thing = document.getElementById('rinput').value;
     map.closePopup();
@@ -618,7 +619,7 @@ var addThing = function() {
     map.addLayer(layers[lay]);
 }
 
-// allow double right click to zoom out
+// allow double right click to zoom out (if enabled)
 // single right click opens a message window that adds a marker
 var rclicked = false;
 var rtout = null;
@@ -626,18 +627,22 @@ map.on('contextmenu', function(e) {
     if (rclicked) {
         rclicked = false;
         clearTimeout(rtout);
-        map.zoomOut();
+        if (map.doubleClickZoom.enabled()) {
+            map.zoomOut();
+        }
     }
     else {
         rclicked = true;
         rtout = setTimeout( function() {
             rclicked = false;
-            rclk = e.latlng;
+            if (hiderightclick !== true) {
-            rightmenuMap.setLatLng(e.latlng);
+                rclk = e.latlng;
-            map.openPopup(rightmenuMap);
+                rightmenuMap.setLatLng(e.latlng);
-            setTimeout( function() {
+                map.openPopup(rightmenuMap);
-                document.getElementById('rinput').focus();
+                setTimeout( function() {
-            }, 200);
+                    document.getElementById('rinput').focus();
+                }, 200);
+            }
         }, 300);
     }
 });
@@ -1344,7 +1349,7 @@ function setMarker(data) {
 
 // handle any incoming COMMANDS to control the map remotely
 function doCommand(cmd) {
-    // console.log("COMMAND",cmd);
+    //console.log("COMMAND",cmd);
     // ignore server side initial command if client position already saved.
     // if (cmd.hasOwnProperty("init") && initialposition) {
     //     return;
@@ -1357,6 +1362,28 @@ function doCommand(cmd) {
         else { panit = false; }
         document.getElementById("panit").checked = panit;
     }
+    if (cmd.hasOwnProperty("panlock")) {
+        if (cmd.panlock == "true" || cmd.panlock == true) { lockit = false; }
+        else { lockit = true; }
+        doLock();
+        document.getElementById("lockit").checked = !lockit;
+    }
+    if (cmd.hasOwnProperty("hiderightclick")) {
+        if (cmd.hiderightclick == "true" || cmd.hiderightclick == true) { hiderightclick = true; }
+        else { hiderightclick = false; }
+    }
+    if (cmd.hasOwnProperty("zoomlock")) {
+        if (cmd.zoomlock == "true" || cmd.zoomlock == true) {
+            if (map.doubleClickZoom.enabled()) { map.removeControl(map.zoomControl); }
+            map.doubleClickZoom.disable();
+            map.scrollWheelZoom.disable();
+        }
+        else {
+            if (!map.doubleClickZoom.enabled()) { map.addControl(map.zoomControl); }
+            map.doubleClickZoom.enable();
+            map.scrollWheelZoom.enable();
+        }
+    }
     if (cmd.hasOwnProperty("showmenu")) {
         if ((cmd.showmenu === "hide") && (showUserMenu === true)) {
             showUserMenu = false;

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Dec 22nd 2018 - v1.5.15
+# date: Dec 23rd 2018 - v1.5.16
 
 CACHE:
 index.html