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

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 ### Change Log for Node-RED Worldmap
 
+ - v4.8.0 - Merged PR for feedback functioanlity 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,8 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
 
 ### Updates
 
+- v4.8.0  - Merged PR for feedback functioanlity 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/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.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",

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)