Add location toggle and trackme command options, also remove historic layers

to close #202 and close #201
2022-08-23 12:09:14 +01:00 · 2022-08-23 12:09:14 +01:00 · ab16942e34
commit ab16942e34
parent f602401660
4 changed files with 77 additions and 40 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,17 +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
--- a/README.md
+++ b/README.md
@ -11,6 +11,7 @@ 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
@ -29,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.

@ -425,6 +423,7 @@ Optional properties include
 - **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

--- a/worldmap.html
+++ b/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)" },
--- a/worldmap/worldmap.js
+++ b/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";
@ -2183,6 +2200,22 @@ function doCommand(cmd) {
            }
        })
    }
+    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 {
+            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")) {
        if (typeof cmd.contextmenu === "string") {
            addmenu = cmd.contextmenu;