From 3e51895d457212ed903b97857c7ecca5b743c689 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Sun, 23 Dec 2018 14:30:26 +0000 Subject: [PATCH] add panlock, zoomlock and hiderightclick control options to close #60 --- CHANGELOG.md | 2 ++ README.md | 6 ++++- package.json | 2 +- worldmap.html | 28 +++++++++++++++++------ worldmap.js | 6 ++++- worldmap/index.html | 47 ++++++++++++++++++++++++++++++-------- worldmap/worldmap.appcache | 2 +- 7 files changed, 72 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b48da11..e4bd25d 100644 --- 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. diff --git a/README.md b/README.md index b573b5a..cef5ded 100644 --- 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 diff --git a/package.json b/package.json index 03ec294..a151186 100644 --- 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", diff --git a/worldmap.html b/worldmap.html index 95a69d9..5729fa1 100644 --- a/worldmap.html +++ b/worldmap.html @@ -51,19 +51,31 @@
- -   Layer menu -
+
+ + + Lock zoom + +
- @@ -76,7 +88,7 @@
-
Set clusterAt to 0 to disable.

If Path is left empty, +
Set Cluster if to 0 to disable clustering of points.
If Path is left empty, then by default ⌘⇧m - ctrl-shift-m will load the map in a new tab.
@@ -94,7 +106,7 @@ then by default ⌘⇧m - ctrl-shift-m will load the m
  • speed : combined with bearing, draws a vector.
  • bearing : combined with speed, draws a vector.
  • accuracy : combined with bearing, draws a polygon of possible direction.
    • -
  • icon : font awesome icon name
    • +
  • icon : font awesome icon name
  • iconColor : standard CSS color name or #rrggbb hex value.
  • SIDC : NATO symbology code (instead of icon).
  • bulding : OSMBuildings GeoJSON object.
    • @@ -107,7 +119,7 @@ then by default ⌘⇧m - ctrl-shift-m will load the m

    Any other sub-properties of msg.payload will be added to the icon popup text box as extra information.

    Icons of type plane, ship, car, uav or arrow will use built in SVG icons that align to the bearing value.

    -

    Font Awesome (fa-icons 4.7) can also be used, as can NATO symbology codes (SIDC).

    +

    Font Awesome (fa-icons 4.7) can also be used, as can NATO symbology codes (SIDC).

    See the README for further details and examples of icons and commands for drawing lines and areas, and to add layers and to control the map remotely, including how to use a local map server.

    @@ -137,6 +149,8 @@ then by default ⌘⇧m - ctrl-shift-m will load the m usermenu: {value:"show"}, layers: {value:"show"}, panit: {value:"false"}, + panlock: {value:"false"}, + zoomlock: {value:"false"}, path: {value:"/worldmap"} }, inputs:1, diff --git a/worldmap.js b/worldmap.js index 6e4d235..8a03adb 100644 --- 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})); } diff --git a/worldmap/index.html b/worldmap/index.html index 0ae47d0..26a3174 100644 --- 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("Add marker
    "); 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; - rightmenuMap.setLatLng(e.latlng); - map.openPopup(rightmenuMap); - setTimeout( function() { - document.getElementById('rinput').focus(); - }, 200); + 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; diff --git a/worldmap/worldmap.appcache b/worldmap/worldmap.appcache index 2805fab..f41b6c0 100644 --- 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