node-red-contrib-web-worldmap 2.25.0 → 2.27.1

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 ### Change Log for Node-RED Worldmap
 
+ - 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.

package/README.md

@@ -11,6 +11,9 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- 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.
@@ -140,6 +143,8 @@ following the great circle between the two co-ordinates is plotted.
 
     msg.payload = {name:"GC1", color:"#ff00ff", greatcircle:[ [51.464,0], [25.76,-80.18] ] }
 
+Shapes can also have a **popup** property containing html, but you MUST also set a property `clickable:true` in order to allow it to be seen.
+
 There are extra optional properties you can specify - see Options below.
 
 
@@ -254,6 +259,7 @@ Areas, Rectangles, Lines, Circles and Ellipses can also specify more optional pr
 
 Other properties can be found in the leaflet documentation.
 
+Shapes can also have a **popup** property containing html, but you MUST also set a property `clickable:true` in order to allow it to be seen.
 
 ### Drawing
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.25.0",
+    "version": "2.27.1",
     "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",

package/worldmap/index.html

@@ -38,7 +38,7 @@
     <link rel="stylesheet" type="text/css" href="leaflet/Leaflet.Dialog.css">
     <link rel="stylesheet" type="text/css" href="leaflet/Control.MiniMap.min.css">
     <link rel="stylesheet" type="text/css" href="leaflet/leaflet-velocity.min.css">
-    <link rel="stylesheet" type="text/css" href="leaflet/Leaflet.Coordinates.css">
+    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.mousecoordinate.css">
     <link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
     <link rel="stylesheet" type="text/css" href="css/worldmap.css"/>
 
@@ -68,7 +68,7 @@
     <script src="leaflet/leaflet-side-by-side.js"></script>
     <script src="leaflet/OSMBuildings-Leaflet.js"></script>
     <script src="leaflet/leaflet-omnivore.min.js"></script>
-    <script src="leaflet/Leaflet.Coordinates.js"></script>
+    <script src="leaflet/leaflet.mousecoordinate.js"></script>
     <script src="leaflet/leaflet.latlng-graticule.js"></script>
     <script src="leaflet/VectorTileLayer.umd.min.js"></script>
     <script src="leaflet/Semicircle.js"></script>

package/worldmap/index3d.html

@@ -18,237 +18,239 @@
 <script>
 
 // TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN FROM https://account.mapbox.com
+// This needs to be set as an environment variable MAPBOXGL_TOKEN available to the Node-RED session on your server
 mapboxgl.accessToken = '';
-//mapboxgl.accessToken = 'pk.eyJ1IjoiZGNlZWpheSIsImEiOiJjaml1aDR6ejQwMml0M3dtdGFlbmEyZHVpIn0.3aD-974hxir335vuLjHOSg';
-mapboxgl.accessToken = 'pk.eyJ1Ijoib3NtYnVpbGRpbmdzIiwiYSI6IjNldU0tNDAifQ.c5EU_3V8b87xO24tuWil0w';
-// if (process.env.MAPBOXGL_TOKEN) {
-//     mapboxgl.accessToken = process.env.MAPBOXGL_TOKEN
-// }
-
-if (mapboxgl.accessToken === "") {
-    alert("To make the map apperar you must add your Access Token from https://account.mapbox.com")
-}
 
+var people = {};
 var mbstyle = 'mapbox://styles/mapbox/streets-v10';
 // var mbstyle = 'mapbox://styles/mapbox/light-v10';
-// var mbstyle = 'https://data.osmbuildings.org/0.2/anonymous/style.json';
-
-var map = new mapboxgl.Map({
-    container: 'map',
-    style: mbstyle,
-    center: [-1.3971, 51.0259],
-    zoom: 16,
-    pitch: 40,
-    bearing: 20,
-    attributionControl: true
-});
 
-var people = {};
+fetch('/-worldmap3d-key')
+    .then(response => response.json())
+    .then(data => {
+        mapboxgl.accessToken = data.key;
+        if (mapboxgl.accessToken === "") {
+            alert("To make the map appear you must add your Access Token from https://account.mapbox.com by setting the MAPBOXGL_TOKEN environment variable on your server.");
+            return;
+        }
 
-map.on('load', function() {
+        var map = new mapboxgl.Map({
+            container: 'map',
+            style: mbstyle,
+            center: [-1.3971, 51.0259],
+            zoom: 16,
+            pitch: 40,
+            bearing: 20,
+            attributionControl: true
+        });
 
-    var layers = map.getStyle().layers;
-    var firstSymbolId;
-    for (var i = 0; i < layers.length; i++) {
-        if (layers[i].type === 'symbol') {
-            firstSymbolId = layers[i].id;
-            break;
-        }
-    }
-
-    /// Add the base 3D buildings layer
-    map.addLayer({
-        'id': '3d-buildings',
-        'source': 'composite',
-        'source-layer': 'building',
-        'filter': ['==', 'extrude', 'true'],
-        'type': 'fill-extrusion',
-        'minzoom': 15,
-        'paint': {
-            'fill-extrusion-color': '#ddd',
-            'fill-extrusion-height': [
-                "interpolate", ["linear"], ["zoom"],
-                15, 0, 15.05, ["get", "height"]
-            ],
-            'fill-extrusion-base': [
-                "interpolate", ["linear"], ["zoom"],
-                15, 0, 15.05, ["get", "min_height"]
-            ],
-            'fill-extrusion-opacity': .4
-        }
-    }, firstSymbolId);
-
-    // ---- Connect to the Node-RED Events Websocket --------------------
-
-    var connect = function() {
-        ws = new SockJS(location.pathname.split("index")[0] + 'socket');
-        ws.onopen = function() {
-            console.log("CONNECTED");
-            // if (!inIframe) {
-            //     document.getElementById("foot").innerHTML = "<font color='#494'>"+ibmfoot+"</font>";
-            // }
-            ws.send(JSON.stringify({action:"connected"}));
-        };
-        ws.onclose = function() {
-            console.log("DISCONNECTED");
-            // if (!inIframe) {
-            //     document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>";
-            // }
-            setTimeout(function() { connect(); }, 2500);
-        };
-        ws.onmessage = function(e) {
-            var data = JSON.parse(e.data);
-            //console.log("GOT",data);
-            if (Array.isArray(data)) {
-                //console.log("ARRAY");
-                for (var prop in data) {
-                    if (data[prop].command) { doCommand(data[prop].command); delete data[prop].command; }
-                    if (data[prop].hasOwnProperty("name")) { setMarker(data[prop]); }
-                    else { console.log("SKIP A",data[prop]); }
+        map.on('load', function() {
+            var layers = map.getStyle().layers;
+            var firstSymbolId;
+            for (var i = 0; i < layers.length; i++) {
+                if (layers[i].type === 'symbol') {
+                    firstSymbolId = layers[i].id;
+                    break;
                 }
             }
-            else {
-                if (data.command) { doCommand(data.command); delete data.command; }
-                if (data.hasOwnProperty("name")) { setMarker(data); }
-                else { console.log("SKIP",data); }
-            }
-        };
-    }
-    console.log("CONNECT TO",location.pathname + 'socket');
-    connect();
-
-    var doCommand = function(c) {
-        console.log("CMD",c);
-        // Add our own overlay geojson layer if necessary
-        if (c.hasOwnProperty("map") && c.map.hasOwnProperty("geojson") && c.map.hasOwnProperty("overlay")) {
-            addGeo(c.map.overlay,c.map.geojson);
-        }
-        var clat,clon;
-        if (c.hasOwnProperty("lat")) { clat = c.lat; }
-        if (c.hasOwnProperty("lon")) { clon = c.lon; }
-        if (clat && clon) { map.setCenter([clon,clat]); }
-        if (c.hasOwnProperty("zoom")) { map.setZoom(c.zoom); }
-        if (c.hasOwnProperty("pitch")) { map.setPitch(c.pitch); }
-        if (c.hasOwnProperty("bearing")) { map.setBearing(c.bearing); }
-    }
-
-    var addGeo = function(o,g) {
-        map.addLayer({
-            'id': o,
-            'type': 'fill-extrusion',
-            'source': {
-                'type': 'geojson',
-                'data': g
-            },
-            'paint': {
-                // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions
-                'fill-extrusion-color': ['get', 'color'],
-                'fill-extrusion-height': ['get', 'height'],
-                'fill-extrusion-base': ['get', 'base_height'],
-                'fill-extrusion-opacity': 0.5
-            }
-        });
-    }
 
-    var setMarker = function(d) {
-        if (d.hasOwnProperty("area")) { return; }  // ignore areas for now.
-        console.log("DATA",d);
-        if (people.hasOwnProperty(d.name)) {
-            map.getSource(d.name).setData(getPoints(d)); // Just update existing marker
-        }
-        else {  // it's a new thing
-            people[d.name] = d;
+            /// Add the base 3D buildings layer
             map.addLayer({
-                'id': d.name,
+                'id': '3d-buildings',
+                'source': 'composite',
+                'source-layer': 'building',
+                'filter': ['==', 'extrude', 'true'],
                 'type': 'fill-extrusion',
-                'source': {
-                    'type': 'geojson',
-                    'data': getPoints(d)
-                },
+                'minzoom': 15,
                 'paint': {
-                    // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions
-                    'fill-extrusion-color': ['get', 'color'],
-                    'fill-extrusion-height': ['get', 'height'],
-                    'fill-extrusion-base': ['get', 'base_height'],
-                    'fill-extrusion-opacity': 1
+                    'fill-extrusion-color': '#ddd',
+                    'fill-extrusion-height': [
+                        "interpolate", ["linear"], ["zoom"],
+                        15, 0, 15.05, ["get", "height"]
+                    ],
+                    'fill-extrusion-base': [
+                        "interpolate", ["linear"], ["zoom"],
+                        15, 0, 15.05, ["get", "min_height"]
+                    ],
+                    'fill-extrusion-opacity': .4
                 }
-            },firstSymbolId);
-        }
-    }
-
-    var lookupColor = function(s) {
-        var c = s.charAt(1);
-        if (c === "F") { return "#79DFFF"; }
-        if (c === "N") { return "#A4FFA3"; }
-        if (c === "U") { return "#FFFF78"; }
-        if (c === "H") { return "#FF7779"; }
-        if (c === "S") { return "#FF7779"; }
-    }
-
-    // create the points for the marker and return the geojson
-    var getPoints = function(p) {
-        var fac = 0.000007;   // basic size for bock icon in degrees....
-        var thing = "";
-        if (p.hasOwnProperty("icon")) {
-            if (p.icon.indexOf("male") !== -1) { thing = "person"; }
-        }
-        p.SDIC = p.SIDC || p.sidc;
-        if (p.hasOwnProperty("SIDC")) {
-            if (p.SIDC.indexOf("SFGPU") !== -1) { thing = "person"; }
-            if (p.SIDC.indexOf("SFGPUC") !== -1) { thing = "block"; }
-            if (p.SIDC.indexOf("GPEV") !== -1) { thing = "block"; }
-            p.iconColor = lookupColor(p.SIDC);
-        }
-        var t = p.type || thing;
-        var base = p.height || 0;
-        if (t === "person") { tall = 3; }                       // person slightly tall and thin
-        else if (t === "bar") { base = 0; tall = p.height; }    // bar from ground to height
-        else if (t === "block") { fac = fac * 4; tall = 5; }    // block large and cube
-        else { tall = 2; fac = fac * 2; }                       // else small cube
-        //console.log({p},{t},{fac},{base},{tall});
-        var sin = 1;
-        var cos = 0;
-        p.hdg = Number(p.hdg || p.heading);
-        if (p.hasOwnProperty("hdg") && !isNaN(p.hdg)) {
-            sin = Math.sin((90 - p.hdg) * Math.PI / 180);
-            cos = Math.cos((90 - p.hdg) * Math.PI / 180);
-        }
-        var dx = 1 * cos - 1 * sin;
-        var dy = 1 * sin + 1 * cos;
-        var d = {
-            "type": "Feature",
-            "properties": {
-                "name": p.name,
-                "type": t,
-                "color": p.iconColor || "#910000",
-                "height": base + tall,
-                "base_height": base
-            },
-            "geometry": {
-                "type": "Polygon",
-                "coordinates": [
-                    [
-                        [ p.lon + (fac * dx ) / Math.cos( Math.PI / 180 * p.lat ), p.lat + (fac * dy) ],
-                        [ p.lon - (fac * dy ) / Math.cos( Math.PI / 180 * p.lat ), p.lat + (fac * dx) ],
-                        [ p.lon - (fac * dx ) / Math.cos( Math.PI / 180 * p.lat ), p.lat - (fac * dy) ],
-                        [ p.lon + (fac * dy ) / Math.cos( Math.PI / 180 * p.lat ), p.lat - (fac * dx) ],
-                        [ p.lon + (fac * dx ) / Math.cos( Math.PI / 180 * p.lat ), p.lat + (fac * dy) ],
-                    ]
-                ]
+            }, firstSymbolId);
+
+            // ---- Connect to the Node-RED Events Websocket --------------------
+
+            var connect = function() {
+                ws = new SockJS(location.pathname.split("index")[0] + 'socket');
+                ws.onopen = function() {
+                    console.log("CONNECTED");
+                    // if (!inIframe) {
+                    //     document.getElementById("foot").innerHTML = "<font color='#494'>"+ibmfoot+"</font>";
+                    // }
+                    ws.send(JSON.stringify({action:"connected"}));
+                };
+                ws.onclose = function() {
+                    console.log("DISCONNECTED");
+                    // if (!inIframe) {
+                    //     document.getElementById("foot").innerHTML = "<font color='#900'>"+ibmfoot+"</font>";
+                    // }
+                    setTimeout(function() { connect(); }, 2500);
+                };
+                ws.onmessage = function(e) {
+                    var data = JSON.parse(e.data);
+                    //console.log("GOT",data);
+                    if (Array.isArray(data)) {
+                        //console.log("ARRAY");
+                        for (var prop in data) {
+                            if (data[prop].command) { doCommand(data[prop].command); delete data[prop].command; }
+                            if (data[prop].hasOwnProperty("name")) { setMarker(data[prop]); }
+                            else { console.log("SKIP A",data[prop]); }
+                        }
+                    }
+                    else {
+                        if (data.command) { doCommand(data.command); delete data.command; }
+                        if (data.hasOwnProperty("name")) { setMarker(data); }
+                        else { console.log("SKIP",data); }
+                    }
+                };
             }
-        }
-        return d;
-    }
-
-    document.addEventListener ("keydown", function (ev) {
-        if (ev.ctrlKey  &&  ev.altKey  &&  ev.code === "Digit3") {
-            ws.close();
-            //window.onbeforeunload = null;
-            window.location.href = "index.html";
-        }
-    });
+            console.log("CONNECT TO",location.pathname + 'socket');
+            connect();
+
+            var doCommand = function(c) {
+                console.log("CMD",c);
+                // Add our own overlay geojson layer if necessary
+                if (c.hasOwnProperty("map") && c.map.hasOwnProperty("geojson") && c.map.hasOwnProperty("overlay")) {
+                    addGeo(c.map.overlay,c.map.geojson);
+                }
+                var clat,clon;
+                if (c.hasOwnProperty("lat")) { clat = c.lat; }
+                if (c.hasOwnProperty("lon")) { clon = c.lon; }
+                if (clat && clon) { map.setCenter([clon,clat]); }
+                if (c.hasOwnProperty("zoom")) { map.setZoom(c.zoom); }
+                if (c.hasOwnProperty("pitch")) { map.setPitch(c.pitch); }
+                if (c.hasOwnProperty("bearing")) { map.setBearing(c.bearing); }
+            }
+
+            var addGeo = function(o,g) {
+                map.addLayer({
+                    'id': o,
+                    'type': 'fill-extrusion',
+                    'source': {
+                        'type': 'geojson',
+                        'data': g
+                    },
+                    'paint': {
+                        // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions
+                        'fill-extrusion-color': ['get', 'color'],
+                        'fill-extrusion-height': ['get', 'height'],
+                        'fill-extrusion-base': ['get', 'base_height'],
+                        'fill-extrusion-opacity': 0.5
+                    }
+                });
+            }
+
+            var setMarker = function(d) {
+                if (d.hasOwnProperty("area")) { return; }  // ignore areas for now.
+                console.log("DATA",d);
+                if (people.hasOwnProperty(d.name)) {
+                    map.getSource(d.name).setData(getPoints(d)); // Just update existing marker
+                }
+                else {  // it's a new thing
+                    people[d.name] = d;
+                    map.addLayer({
+                        'id': d.name,
+                        'type': 'fill-extrusion',
+                        'source': {
+                            'type': 'geojson',
+                            'data': getPoints(d)
+                        },
+                        'paint': {
+                            // https://www.mapbox.com/mapbox-gl-js/style-spec/#expressions
+                            'fill-extrusion-color': ['get', 'color'],
+                            'fill-extrusion-height': ['get', 'height'],
+                            'fill-extrusion-base': ['get', 'base_height'],
+                            'fill-extrusion-opacity': 1
+                        }
+                    },firstSymbolId);
+                }
+            }
+
+            var lookupColor = function(s) {
+                var c = s.charAt(1);
+                if (c === "F") { return "#79DFFF"; }
+                if (c === "N") { return "#A4FFA3"; }
+                if (c === "U") { return "#FFFF78"; }
+                if (c === "H") { return "#FF7779"; }
+                if (c === "S") { return "#FF7779"; }
+            }
+
+            // create the points for the marker and return the geojson
+            var getPoints = function(p) {
+                var fac = 0.000007;   // basic size for bock icon in degrees....
+                var thing = "";
+                if (p.hasOwnProperty("icon")) {
+                    if (p.icon.indexOf("male") !== -1) { thing = "person"; }
+                }
+                p.SDIC = p.SIDC || p.sidc;
+                if (p.hasOwnProperty("SIDC")) {
+                    if (p.SIDC.indexOf("SFGPU") !== -1) { thing = "person"; }
+                    if (p.SIDC.indexOf("SFGPUC") !== -1) { thing = "block"; }
+                    if (p.SIDC.indexOf("GPEV") !== -1) { thing = "block"; }
+                    p.iconColor = lookupColor(p.SIDC);
+                }
+                var t = p.type || thing;
+                var base = p.height || 0;
+                if (t === "person") { tall = 3; }                       // person slightly tall and thin
+                else if (t === "bar") { base = 0; tall = p.height; }    // bar from ground to height
+                else if (t === "block") { fac = fac * 4; tall = 5; }    // block large and cube
+                else { tall = 2; fac = fac * 2; }                       // else small cube
+                //console.log({p},{t},{fac},{base},{tall});
+                var sin = 1;
+                var cos = 0;
+                p.hdg = Number(p.hdg || p.heading);
+                if (p.hasOwnProperty("hdg") && !isNaN(p.hdg)) {
+                    sin = Math.sin((90 - p.hdg) * Math.PI / 180);
+                    cos = Math.cos((90 - p.hdg) * Math.PI / 180);
+                }
+                var dx = 1 * cos - 1 * sin;
+                var dy = 1 * sin + 1 * cos;
+                var d = {
+                    "type": "Feature",
+                    "properties": {
+                        "name": p.name,
+                        "type": t,
+                        "color": p.iconColor || "#910000",
+                        "height": base + tall,
+                        "base_height": base
+                    },
+                    "geometry": {
+                        "type": "Polygon",
+                        "coordinates": [
+                            [
+                                [ p.lon + (fac * dx ) / Math.cos( Math.PI / 180 * p.lat ), p.lat + (fac * dy) ],
+                                [ p.lon - (fac * dy ) / Math.cos( Math.PI / 180 * p.lat ), p.lat + (fac * dx) ],
+                                [ p.lon - (fac * dx ) / Math.cos( Math.PI / 180 * p.lat ), p.lat - (fac * dy) ],
+                                [ p.lon + (fac * dy ) / Math.cos( Math.PI / 180 * p.lat ), p.lat - (fac * dx) ],
+                                [ p.lon + (fac * dx ) / Math.cos( Math.PI / 180 * p.lat ), p.lat + (fac * dy) ],
+                            ]
+                        ]
+                    }
+                }
+                return d;
+            }
+
+            document.addEventListener ("keydown", function (ev) {
+                if (ev.ctrlKey  &&  ev.altKey  &&  ev.code === "Digit3") {
+                    ws.close();
+                    //window.onbeforeunload = null;
+                    window.location.href = "index.html";
+                }
+            });
 
 });
+
+})
+.catch(error => { console.log("Unable to fetch MAPBOXGL_TOKEN.",error)} );
+
 </script>
 </body>
 </html>

package/worldmap/leaflet/leaflet.mousecoordinate.css

@@ -0,0 +1,7 @@
+.leaflet-control-mouseCoordinate{
+    text-align:left;
+    border-radius:4px;
+    color:#333;
+    background:rgba(255,255,255,0.7);
+    padding:4px 8px 4px 4px
+}