node-red-contrib-web-worldmap 2.28.1 → 2.29.0

package/CHANGELOG.md

@@ -1,16 +1,24 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.29.0 - Change locate to be a toggle and add command (trackme) to set style
+ 
+ - v2.28.3 - Let button declaration be an array
  - v2.28.1 - Fix layer command bug for non-core layers. Issue #195
  - v2.28.0 - Better Handling of sidc icons in geojson
+
  - v2.27.3 - Try to handle greatcircles crossing antimeridian
  - v2.27.1 - Reload existing markers for late joiners
+
  - v2.26.1 - Add QTH/Maidenhead option also
  - v2.26.0 - Add UTM and MGRS to coordinate display options.
+
  - v2.25.0 - Add bounds command to set overall map bounds.
+
  - v2.24.3 - Fix geojson incorrect fill.
  - v2.24.2 - Changes to drawing colours to be more visible.
  - v2.24.1 - Fix ellipse accuracy.
  - v2.24.0 - Add greatcircle option, fix non default httpRoot. Issue #193
+
  - v2.23.5 - Fix addtoheatmap. Issue #192
  - v2.23.4 - Fix opacity of area borders
  - v2.23.3 - Fix initial load of maps

package/README.md

@@ -11,6 +11,8 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.29.0 - Change locate to be a toggle and add command (trackme) to set style. Issue #202
+- v2.28.3 - Let button declaration be an array
 - v2.28.1 - Fix layer command bug for non-core layers. Issue #195
 - v2.28.0 - Better Handling of sidc icons in geojson
 - v2.27.3 - Try to handle greatcircles crossing antimeridian
@@ -28,9 +30,6 @@ map web page for plotting "things" on.
 - v2.23.2 - Add convex-hull example
 - v2.23.1 - Fix saving of custom map layer
 - v2.23.0 - Give logo an id so it can be overridden by toplogo command. PR #188.
-- v2.22.3 - Don't show empty popup for geojson object. Issue #186. Add wobble to null island.
-- v2.22.2 - Be more tolerant of speed string types
-- v2.22.0 - Separate out layer events in worldmap in
 
 - see [CHANGELOG](https://github.com/dceejay/RedMap/blob/master/CHANGELOG.md) for full list of changes.
 
@@ -420,10 +419,11 @@ Optional properties include
  - **hiderightclick** - disables the right click that allows adding or deleting points on the map - `{"command":{"hiderightclick":true}}`
  - **coords** - turns on and off a display of the current mouse co-ordinates. Values can be "deg", "dms", or "none" (default). - `{"command":{"coords":"deg"}}`
  - **button** - if supplied with a `name` and `icon` property - adds a button to provide user input - sends
- a msg `{"action":"button", "name":"the_button_name"}` to the worldmap in node. If supplied with a `name` property only, it will remove the button. Optional `position` property can be 'bottomright', 'bottomleft', 'topleft' or 'topright' (default).
+ a msg `{"action":"button", "name":"the_button_name"}` to the worldmap in node. If supplied with a `name` property only, it will remove the button. Optional `position` property can be 'bottomright', 'bottomleft', 'topleft' or 'topright' (default). button can also be an array of button objects.
  - **contextmenu** - html string to define the right click menu when not on a marker. Defaults to the simple add marker input. Empty string `""` disables this right click.
  - **toptitle** - Words to replace title in title bar (if not in iframe)
  - **toplogo** - URL to logo image for top tile bar (if not in iframe) - ideally 60px by 24px.
+ - **trackme** - Turns on/off the browser self locating. Boolean false = off, true = cyan circle showing accuracy error, or an object like `{"command":{"trackme":{"name":"Dave","icon":"car","iconColor":"blue","layer":"mytrack","accuracy":false}}}`. Usual marker options can be applied. 
 
 #### To switch layer, move map and zoom
 
@@ -445,6 +445,8 @@ to remove
 
     msg.payload.command = { "button": { "name":"My Fancy Button" } };
 
+Multiple buttons can declared by using an array of button objects.
+
 #### To add a custom popup or contextmenu
 
 You can customise a marker's popup, or context menu (right click), by setting the

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.28.1",
+    "version": "2.29.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "@turf/bezier-spline": "~6.5.0",
         "cgi": "0.3.1",
         "compression": "^1.7.4",
-        "express": "^4.17.2",
+        "express": "^4.18.1",
         "sockjs": "~0.3.24"
     },
     "bundledDependencies": [

package/worldmap/worldmap.js

@@ -257,16 +257,27 @@ var menuButton = L.easyButton({states:[{icon:'fa-bars fa-lg', onClick:function()
 var fullscreenButton = L.control.fullscreen();
 var rulerButton = L.control.ruler({position:"topleft"});
 
+var followMode = { accuracy:true };
+var followState = false;
+var trackMeButton;
+var errRing;
+
 function onLocationFound(e) {
-    var radius = e.accuracy;
-    //L.marker(e.latlng).addTo(map).bindPopup("You are within " + radius + " meters from this point").openPopup();
-    L.circle(e.latlng, radius, {color:"cyan", weight:4, opacity:0.8, fill:false, clickable:false}).addTo(map);
-    if (e.hasOwnProperty("heading")) {
-        var lengthAsDegrees = e.speed * 60 / 110540;
-        var ya = e.latlng.lat + Math.sin((90-e.heading)/180*Math.PI)*lengthAsDegrees*Math.cos(e.latlng.lng/180*Math.PI);
-        var xa = e.latlng.lng + Math.cos((90-e.heading)/180*Math.PI)*lengthAsDegrees;
-        var lla = new L.LatLng(ya,xa);
-        L.polygon([ e.latlng, lla ], {color:"cyan", weight:3, opacity:0.5, clickable:false}).addTo(map);
+    if (followState === true) { map.panTo(e.latlng); }
+    if (followMode.icon) {
+        var self = {name:followMode.name || "self", lat:e.latlng.lat, lon:e.latlng.lng, hdg:e.heading, speed:(e.speed*3.6 || undefined), layer:followMode.layer, icon:followMode.icon, iconColor:followMode.iconColor || "#910000" };
+        setMarker(self);
+    }
+    if (followMode.accuracy) {
+        errRing = L.circle(e.latlng, e.accuracy, {color:followMode.color || "cyan", weight:3, opacity:0.6, fill:false, clickable:false});
+        errRing.addTo(map);
+        // if (e.hasOwnProperty("heading")) {
+        //     var lengthAsDegrees = e.speed * 60 / 110540;
+        //     var ya = e.latlng.lat + Math.sin((90-e.heading)/180*Math.PI)*lengthAsDegrees*Math.cos(e.latlng.lng/180*Math.PI);
+        //     var xa = e.latlng.lng + Math.cos((90-e.heading)/180*Math.PI)*lengthAsDegrees;
+        //     var lla = new L.LatLng(ya,xa);
+        //     L.polygon([ e.latlng, lla ], {color:"cyan", weight:3, opacity:0.5, clickable:false}).addTo(map);
+        // }
     }
     ws.send(JSON.stringify({action:"point", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5), point:"self", hdg:e.heading, speed:(e.speed*3.6 || undefined)}));
 }
@@ -295,13 +306,36 @@ else {
     // Add the fullscreen button
     fullscreenButton.addTo(map);
 
-    // Add the locate my position button
-    L.easyButton( 'fa-crosshairs fa-lg', function() {
-        map.locate({setView:true, maxZoom:16});
-    }, "Locate me").addTo(map);
+    trackMeButton = L.easyButton({
+        states: [{
+            stateName: 'track-on',
+            icon:      'fa-window-close-o fa-lg',
+            title:     'Disable tracking',
+            onClick: function(btn, map) {
+                btn.state('track-off');
+                followState = false;
+                if (errRing) { errRing.removeFrom(map); }
+                delMarker(followMode.name || "self")
+                map.stopLocate();
+            }
+        }, {
+            stateName: 'track-off',
+            icon:      'fa-crosshairs fa-lg',
+            title:     'Enable tracking',
+            onClick: function(btn, map) {
+                btn.state('track-on');
+                followState = true;
+                map.locate({setView:false, watch:followState, enableHighAccuracy:true});
+            }
+        }]
+    });
+    trackMeButton.state('track-off');
+    trackMeButton.addTo(map);
 
-    map.on('locationfound', onLocationFound);
-    map.on('locationerror', onLocationError);
+    // Add the locate my position button
+    // L.easyButton( 'fa-crosshairs fa-lg', function() {
+    //     map.locate({setView:true, maxZoom:16});
+    // }, "Locate me").addTo(map);
 
     // Add the measure/ruler button
     rulerButton.addTo(map);
@@ -644,6 +678,8 @@ map.on('moveend', function() {
     var b = map.getBounds();
     ws.send(JSON.stringify({action:"bounds", south:b._southWest.lat, west:b._southWest.lng, north:b._northEast.lat, east:b._northEast.lng, zoom:map.getZoom() }));
 });
+map.on('locationfound', onLocationFound);
+map.on('locationerror', onLocationError);
 
 //map.on('contextmenu', function(e) {
 //    ws.send(JSON.stringify({action:"rightclick", lat:e.latlng.lat.toFixed(5), lon:e.latlng.lng.toFixed(5)}));
@@ -743,7 +779,7 @@ var addBaseMaps = function(maplist,first) {
     // console.log("MAPS",first,maplist)
     var layerlookup = { OSMG:"OSM grey", OSMC:"OSM", OSMH:"OSM Humanitarian", EsriC:"Esri", EsriS:"Esri Satellite",
         EsriR:"Esri Relief", EsriT:"Esri Topography", EsriO:"Esri Ocean", EsriDG:"Esri Dark Grey", NatGeo: "National Geographic",
-        UKOS:"UK OS OpenData", OS45:"UK OS 1919-1947", OS00:"UK OS 1900", OpTop:"Open Topo Map",
+        UKOS:"UK OS OpenData", OpTop:"Open Topo Map",
         HB:"Hike Bike OSM", ST:"Stamen Topography", SW:"Stamen Watercolor", AN:"AutoNavi (Chinese)"
     }
 
@@ -866,25 +902,6 @@ var addBaseMaps = function(maplist,first) {
             });
         }
 
-        if (maplist.indexOf("OS45")!==-1) {
-            basemaps[layerlookup["OS45"]] = L.tileLayer( 'https://nls-{s}.tileserver.com/nls/{z}/{x}/{y}.jpg', {
-                attribution: 'Historical Maps Layer, from <a href="https://maps.nls.uk/projects/api/">NLS Maps</a>',
-                bounds: [[49.6, -12], [61.7, 3]],
-                minZoom:1, maxZoom:18,
-                subdomains: '0123'
-            });
-        }
-
-        if (maplist.indexOf("OS00")!==-1) {
-            //var NLS_OS_1900 = L.tileLayer('https://nls-{s}.tileserver.com/NLS_API/{z}/{x}/{y}.jpg', {
-            basemaps[layerlookup["OS00"]] = L.tileLayer('https://nls-{s}.tileserver.com/fpsUZbzrfb5d/{z}/{x}/{y}.jpg', {
-                attribution: '<a href="https://geo.nls.uk/maps/">National Library of Scotland Historic Maps</a>',
-                bounds: [[49.6, -12], [61.7, 3]],
-                minZoom:1, maxNativeZoom:19, maxZoom:20,
-                subdomains: '0123'
-            });
-        }
-
         // Nice terrain based maps by Stamen Design
         if (maplist.indexOf("ST")!==-1) {
             var terrainUrl = "https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg";
@@ -2166,18 +2183,37 @@ function doCommand(cmd) {
         }
     }
     if (cmd.hasOwnProperty("button")) {
-        if (cmd.button.icon) {
-            if (!buttons[cmd.button.name]) {
-                buttons[cmd.button.name] = L.easyButton( cmd.button.icon, function() {
-                    ws.send(JSON.stringify({action:"button",name:cmd.button.name}));
-                }, cmd.button.name, { position:cmd.button.position||'topright' }).addTo(map);
+        if (!Array.isArray(cmd.button)) { cmd.button = [cmd.button]; }
+        cmd.button.forEach(function(b) {
+            if (b.icon) {
+                if (!buttons[b.name]) {
+                    buttons[b.name] = L.easyButton( b.icon, function() {
+                        ws.send(JSON.stringify({action:"button", name:b.name}));
+                    }, b.name, { position:b.position||'topright' }).addTo(map);
+                }
             }
+            else {
+                if (buttons[b.name]) {
+                    buttons[b.name].removeFrom(map);
+                    delete buttons[b.name];
+                }
+            }
+        })
+    }
+    if (cmd.hasOwnProperty("trackme")) {
+        if (cmd.trackme === false) {
+            followState = false;
+            map.stopLocate();
+            if (errRing) { errRing.removeFrom(map); }
+            delMarker(followMode.name || "self")
+            if (trackMeButton !== undefined) { trackMeButton.state('track-off'); }
         }
         else {
-            if (buttons[cmd.button.name]) {
-                buttons[cmd.button.name].removeFrom(map);
-                delete buttons[cmd.button.name];
-            }
+            followState = true;
+            if (cmd.trackme === true) { followMode = { accuracy:true }; }
+            else { followMode = cmd.trackme; }
+            map.locate({setView:false, watch:followState, enableHighAccuracy:true});
+            if (trackMeButton !== undefined) { trackMeButton.state('track-on'); }
         }
     }
     if (cmd.hasOwnProperty("contextmenu")) {

package/worldmap.html

@@ -318,8 +318,6 @@ If <i>Web Path</i> is left empty, then by default <code>⌘⇧m</code> - <code>c
         { value: "EsriDG", label: "ESRI Dark Grey" },
         { value: "NatGeo", label: "National Geographic" },
         { value: "UKOS", label: "UK OS Opendata" },
-        { value: "OS45", label: "UK OS 1919-47" },
-        { value: "OS00", label: "UK OS 1900" },
         { value: "OpTop", label: "Open Topo Map" },
         { value: "HB", label: "Hike Bike OSM" },
         { value: "AN", label: "Autonavi (Chinese)" },