add panlock, zoomlock and hiderightclick control options

to close #60
2018-12-23 14:30:26 +00:00 · 2018-12-23 14:30:26 +00:00 · 3e51895d45
commit 3e51895d45
parent 071007f11c
7 changed files with 72 additions and 21 deletions
--- a/CHANGELOG.md
+++ b/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.
--- a/README.md
+++ b/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

--- a/package.json
+++ b/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",
--- a/worldmap.html
+++ b/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
-    <select id="node-input-layers" style="width:80px;">
+    <i class="fa fa-bars" style="margin-left:30px;"></i> Layer menu
+    <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,
--- a/worldmap.js
+++ b/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}));
                }
--- a/worldmap/index.html
+++ b/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);
+        if (map.doubleClickZoom.enabled()) {
            map.zoomOut();
        }
+    }
    else {
        rclicked = true;
        rtout = setTimeout( function() {
            rclicked = false;
+            if (hiderightclick !== true) {
                rclk = e.latlng;
                rightmenuMap.setLatLng(e.latlng);
                map.openPopup(rightmenuMap);
                setTimeout( function() {
                    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;
--- a/worldmap/worldmap.appcache
+++ b/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