node-red-contrib-web-worldmap 4.7.0 → 4.8.1

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 ### Change Log for Node-RED Worldmap
 
+ - v4.8.1 - Slight tidy of some of the geojson handling
+ - v4.8.0 - Merged PR for feedback functionality cleanup and example. PR #271 and #272
+ - v4.7.0 - Update pmtiles library, fix feedback function inconsistency. Issue #270
  - v4.6.5 - Let geojson allow for generic overrides with .icon and .layer.
  - v4.6.4 - Fix deletion of layers logic to actually fully remove points.
  - v4.6.3 - Fix sending of layer events when not wanted. Issue #262

package/README.md

@@ -13,6 +13,9 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v4.8.1  - Slight tidy of some of the geojson handling
+- v4.8.0  - Merged PR for feedback functionality cleanup and example. PR #271 and #272
+- v4.7.0  - Update pmtiles library, fix feedback function inconsistency. Issue #270
 - v4.6.5  - Let geojson allow for generic overrides with .icon and .layer.
 - v4.6.4  - Fix deletion of layers logic to actually fully remove points.
 - v4.6.3  - Fix sending of layer events when not wanted. Issue #262
@@ -395,7 +398,7 @@ Optional properties for **msg.payload.command** include
  - **panit** - auto pan to the latest marker updated.  - `{"command":{"panit":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 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"}}`
+ - **coords** - turns on and off a display of the current mouse co-ordinates. Values can be "deg", "dms", "utm", "mgrs", "qth" or "none" (default). - `{"command":{"coords":"deg"}}` , `{"command":{"coords":"deg,dms,utm"}}`
  - **showruler** - turns on and off a display of the ruler control. Values can be "true" or "false". - `{"command": {"ruler": {"showruler": true}}}`
  - **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). button can also be an array of button objects.

package/examples/feedback.json

@@ -0,0 +1,129 @@
+[
+    {
+        "id": "46f4b9ae1c66c1ba",
+        "type": "tab",
+        "label": "Flow 4",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "c643e022.1816c",
+        "type": "worldmap",
+        "z": "46f4b9ae1c66c1ba",
+        "name": "",
+        "lat": "30",
+        "lon": "0",
+        "zoom": "3",
+        "layer": "OSMG",
+        "cluster": "",
+        "maxage": "",
+        "usermenu": "show",
+        "layers": "show",
+        "panit": "false",
+        "panlock": "false",
+        "zoomlock": "false",
+        "hiderightclick": "false",
+        "coords": "deg",
+        "showgrid": "false",
+        "showruler": "false",
+        "allowFileDrop": "false",
+        "path": "worldmap",
+        "overlist": "DR,CO,RA,DN",
+        "maplist": "OSMG,OSMH,EsriS",
+        "mapname": "",
+        "mapurl": "",
+        "mapopt": "",
+        "mapwms": false,
+        "x": 1000,
+        "y": 480,
+        "wires": []
+    },
+    {
+        "id": "4966f5218c3fe1df",
+        "type": "inject",
+        "z": "46f4b9ae1c66c1ba",
+        "name": "",
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "topic": "",
+        "payload": "",
+        "payloadType": "none",
+        "x": 530,
+        "y": 480,
+        "wires": [
+            [
+                "87dff974113c8c54"
+            ]
+        ]
+    },
+    {
+        "id": "87dff974113c8c54",
+        "type": "function",
+        "z": "46f4b9ae1c66c1ba",
+        "name": "add new rectangle",
+        "func": "\nmsg.payload = {\"command\":{\"bounds\":[[49.83682820280039,-4.019763692204326],[51.4723362586149,1.1741268015945219]]}};\nnode.send(msg);\nmsg.payload = {\"command\":{\"zoom\":9.7}};\nnode.send(msg);\n\n\nvar popup = \"<button name=\\\"B1name\\\" onclick='feedback(\\\"${name}\\\",\\\"${name} sends {x} Hellow\\\",\\\"myAction\\\",true);'>Hellow1 from ${name}</button>\";\npopup += \"<button name=\\\"B2name\\\" onclick='feedback(this.name,\\\"${name} sends {x} Hellow\\\",\\\"myAction\\\",true);'>Hellow2 from ${name}</button>\";\n\nvar points =  [ { \"lat\": 50.66, \"lng\": -1.59 }, { \"lat\": 50.60, \"lng\": -1.47 } ] ;\nmsg.payload =  {\n    popup: popup.replace(/\\{x\\}/,\"popup\"),\n    contextmenu: popup.replace(/\\{x\\}/, \"context\"),\n    name: \"myShape\",\n    area: points,\n    clickable:true,\n };\nnode.send(msg);\n\nmsg.payload = {\n    popup: popup,\n    contextmenu: popup,\n    name: \"myMarker\",\n    lat: 50.40,\n    lon: -1.0,\n    weight: 1,\n};\nnode.send(msg);\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 770,
+        "y": 480,
+        "wires": [
+            [
+                "c643e022.1816c",
+                "34ad8daae96efd3e"
+            ]
+        ]
+    },
+    {
+        "id": "32d7cc4d4db67f66",
+        "type": "worldmap in",
+        "z": "46f4b9ae1c66c1ba",
+        "name": "",
+        "path": "/worldmap",
+        "events": "connect,disconnect,point,layer,bounds,files,draw,other",
+        "x": 500,
+        "y": 540,
+        "wires": [
+            [
+                "32a2b83008623990"
+            ]
+        ]
+    },
+    {
+        "id": "32a2b83008623990",
+        "type": "debug",
+        "z": "46f4b9ae1c66c1ba",
+        "name": "debug 14",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 680,
+        "y": 540,
+        "wires": []
+    },
+    {
+        "id": "34ad8daae96efd3e",
+        "type": "debug",
+        "z": "46f4b9ae1c66c1ba",
+        "name": "debug 15",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 980,
+        "y": 400,
+        "wires": []
+    }
+]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "4.7.0",
+    "version": "4.8.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/worldmap.js

@@ -865,6 +865,10 @@ var addThing = function() {
 var form = {};
 var addToForm = function(n,v) { form[n] = v; }
 var feedback = function(n,v,a,c) {
+/*
+//  suggest to reove all the special handling for simplification, no reason to send information
+//  about entities that the backend generaed, the need is only to get recognizable actions from the frontend
+//
     if (v === "_form") { v = form; }
     if (markers[n]) {
         console.log("FB1",n,v,a,c)
@@ -875,8 +879,10 @@ var feedback = function(n,v,a,c) {
         setMarker(allData[n]);
     }
     else if (polygons[n]) {
-        console.log("FB2",n,v,a)
-        sendDrawing(n,v,a)
+        console.log("FB2", n, v, a);
+        const polyData = { "name": n, "action": a || "feedback", "value": v || null };
+        //sendDrawing(n,v,a)
+        ws.send(JSON.stringify(polyData));
     }
     else {
         if (n === undefined) { n = "map"; }
@@ -884,6 +890,10 @@ var feedback = function(n,v,a,c) {
         rmenudata = v;
         ws.send(JSON.stringify({action:a||"feedback", name:n, value:v, lat:rclk.lat, lon:rclk.lng}));
     }
+*/
+
+	const dataToSend = { "name": n, "action": a || "feedback", "value": v || null };
+	ws.send(JSON.stringify(dataToSend));
     if (c === true) { map.closePopup(); }
 }
 
@@ -1188,7 +1198,7 @@ var addOverlays = function(overlist) {
                 rightmenuMarker = L.popup({offset:[0,-12]}).setContent(drawcontextmenu.replace(/\${name}/g,name).replace(/\${.*?}/g,'') || "<input type='text' autofocus value='"+name+"' id='dinput' placeholder='name (,icon, layer)'/><br/><button onclick='editPoly(\""+name+"\");'>Edit points</button><button onclick='editPoly(\""+name+"\",\"drag\");'>Drag</button><button onclick='editPoly(\""+name+"\",\"rot\");'>Rotate</button><button onclick='delMarker(\""+name+"\",true);'>Delete</button><button onclick='sendRoute(\""+name+"\");'>Route</button><button onclick='sendDrawing(\""+name+"\");'>OK</button>");
             }
             rightmenuMarker.setLatLng(cent);
-            setTimeout(function() {map.openPopup(rightmenuMarker)},25);
+            setTimeout(function() {map.openPopup(rightmenuMarker).replace(/\${name}/g,name)},25);
         });
 
         sendDrawing = function(n,v,a) {
@@ -1510,7 +1520,8 @@ function setMarker(data) {
         m.on('click', function(e) {
             var fb = allData[data["name"]];
             fb.action = "click";
-            ws.send(JSON.stringify(fb));
+            if (fb.sendOnClick ?? true)
+                ws.send(JSON.stringify(fb));
         });
         // customise right click context menu
         var rightcontext = "";
@@ -1529,7 +1540,7 @@ function setMarker(data) {
                 rightcontext = rightcontext.replace(new RegExp("\\${"+item+"}","g"),allData[data["name"]].value[item]);
             }
         }
-        rightcontext = rightcontext.replace(/\${.*?}/g,'')
+        rightcontext = rightcontext.replace(/\${.*?}/g,'').replace(/\${name}/g,data["name"])
         if (rightcontext.length > 0) {
             var rightmenuMarker = L.popup({offset:[0,-12]}).setContent("<b>"+data["name"]+"</b><br/>"+rightcontext);
             if (hiderightclick !== true) {
@@ -1698,7 +1709,7 @@ function setMarker(data) {
         // if clickable then add popup
         if (opt.clickable === true) {
             var words = "<b>"+data["name"]+"</b>";
-            if (data.popup) { words = words + "<br/>" + data.popup; }
+            if (data.popup) { words = words + "<br/>" + data.popup.replace(/\${name}/g,data["name"]); }
             polygons[data["name"]].bindPopup(words, {autoClose:false, closeButton:true, closeOnClick:true, minWidth:200});
         }
         // add a tooltip (if supplied)
@@ -2547,11 +2558,11 @@ function doCommand(cmd) {
         try { coords.removeFrom(map); }
         catch(e) {}
         var opts = {gps:false, gpsLong:false, utm:false, utmref:false, position:"bottomleft"}
-        if (cmd.coords == "deg") { opts.gps = true; }
-        if (cmd.coords == "dms") { opts.gpsLong = true; }
-        if (cmd.coords == "utm") { opts.utm = true; }
-        if (cmd.coords == "mgrs") { opts.utmref = true; }
-        if (cmd.coords == "qth") { opts.qth = true; }
+        if (cmd.coords.includes("deg")) { opts.gps = true; }
+        if (cmd.coords.includes("dms")) { opts.gpsLong = true; }
+        if (cmd.coords.includes("utm")) { opts.utm = true; }
+        if (cmd.coords.includes("mgrs")) { opts.utmref = true; }
+        if (cmd.coords.includes("qth")) { opts.qth = true; }
         coords.options = opts;
         coords.addTo(map);
     }
@@ -3100,12 +3111,16 @@ function doGeojson(n,g,l,o,i) {  // name, geojson, layer, options, icon
             st.weight = feature.properties["stroke-width"] ?? st.weight;
             st.fillColor = feature.properties["fill-color"] ?? feature.properties["fill"] ?? st.fillColor;
             st.fillOpacity = feature.properties["fill-opacity"] ?? st.fillOpacity;
+            st.fontColor = feature.properties["font-color"] ?? st.fontColor ?? "#000000";
+            st.fontOpacity = feature.properties["font-opacity"] ?? st.fontOpacity;
             delete feature.properties["stroke"];
             delete feature.properties["stroke-width"];
-            delete feature.properties["fill-color"];
+            delete feature.properties["stroke-opacity"];
             delete feature.properties["fill"];
+            delete feature.properties["fill-color"];
             delete feature.properties["fill-opacity"];
-            delete feature.properties["stroke-opacity"];
+            delete feature.properties["font-color"];
+            delete feature.properties["font-opacity"];
         }
         if (feature.hasOwnProperty("style")) {
             //console.log("GSTYLE", feature.style)
@@ -3130,17 +3145,17 @@ function doGeojson(n,g,l,o,i) {  // name, geojson, layer, options, icon
         }
         if (feature.properties.hasOwnProperty("SIDC")) {
             myMarker = new ms.Symbol( feature.properties.SIDC.toUpperCase(), {
-                uniqueDesignation:unescape(encodeURIComponent(feature.properties.title||feature.properties.unit)),
+                uniqueDesignation:unescape(encodeURIComponent(feature.properties.title||feature.properties.unit||'')),
                 country:feature.properties.country,
                 direction:feature.properties.bearing,
                 additionalInformation:feature.properties.modifier,
-                size:25
+                size:20
             });
             var anc = myMarker.getAnchor();
-            if (myMarker.hasOwnProperty("metadata") && myMarker.metadata.hasOwnProperty("echelon")) {
-                var sz = iconSz[myMarker.metadata.echelon];
-                myMarker.setOptions({size:sz});
-            }
+            // if (myMarker.hasOwnProperty("metadata") && myMarker.metadata.hasOwnProperty("echelon")) {
+            //     var sz = iconSz[myMarker.metadata.echelon];
+            //     myMarker.setOptions({size:sz});
+            // }
             myMarker = L.icon({
                 iconUrl: myMarker.toDataURL(),
                 iconAnchor: [anc.x, anc.y],
@@ -3167,8 +3182,10 @@ function doGeojson(n,g,l,o,i) {  // name, geojson, layer, options, icon
                 iconColor: 'white'
             });
         }
-        if (!feature.properties.hasOwnProperty("title")) {
-            feature.properties.title = feature.properties["marker-symbol"];
+        if (!feature.properties.hasOwnProperty("title") && feature.properties.hasOwnProperty("marker-symbol")) {
+            if (!feature.properties["marker-symbol"].indexOf('fa-') === 0) {
+                feature.properties.title = feature.properties["marker-symbol"];
+            }
         }
         if (feature.properties.hasOwnProperty("url")) {
             feature.properties.url = "<a target='_new' href='"+feature.properties.url+"'>"+feature.properties.url+"</a>";