Fix feedback function and hull multiple layer handling

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.5.9 - Fix handling of multiple hulls, tidy contextmenu handling
  - v2.5.8 - Let node name be the full page map title
  - v2.5.7 - Let fillColor set color of hulls
  - v2.5.6 - Let node accept plain text payload kml or nvg input

README.md

@@ -11,6 +11,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.5.9 - Fix handling of multiple hulls, tidy contextmenu handling
 - v2.5.8 - Let node name be the full page map title
 - v2.5.7 - Let fillColor set color of hulls
 - v2.5.6 - Let node accept plain text payload kml or nvg input
@@ -350,7 +351,7 @@ All actions also include a `msg._sessionid` property that indicates which client
 
 There are some internal functions available to make interacting with Node-RED easier (e.g. from inside a user defined popup., these include:
 
- - **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable.
+ - **feedback()** : it takes 2, 3, or 4 parameters, name, value, and optionally an action name (defaults to "feedback"), and optional boolean to close the popup on calling this function, and can be used inside something like an input tag - `onchange='feedback(this.name,this.value,null,true)'`. Value can be a more complex object if required as long as it is serialisable. If used with a marker the name should be that of the marker - you can use `$name` to let it be substituted automatically.
 
  - **delMarker()** : takes the name of the marker as a parameter. In a popup this can be specified as `$name` for dynamic substitution.
 
@@ -416,13 +417,27 @@ appropriate property to an html string. Often you will need some embedded javasc
 in order to make it do something when you click a button for example. You need to be
 careful escaping quotes, and that they remain matched.
 
-For example a popup with a slider (note the \ escaping the internal ' )
+For example a marker popup with a slider (note the \ escaping the internal ' )
 
-    popup: '<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback(this.name,this.value)\' style="width:250px;">'
+    popup: '<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback($name,this.value,this.name)\' style="width:250px;">'
 
-Or a contextmenu with a button
+Or a marker contextmenu with an input box
 
-    contextmenu: '<button name="Clicker" onclick=\'feedback(this.name)\'>Click me</button>'
+    contextmenu: '<input name="channel" type="text" value="5" onchange=\'feedback($name,{"name":this.name,"value":this.value},"myFeedback")\' />'
+
+Or you can add a contextmenu to the map. Simple contextmenu with a button
+
+    msg.payload.command = {
+        contextmenu: '<button name="Clicker" onclick=\'feedback(this.name,"ping!)\'>Click me</button>'
+    }
+
+Or with an input box
+
+    msg.payload.command : {
+        contextmenu: '<input name="slide1" type="range" min="1" max="100" value="50" onchange=\'feedback(this.name,this.value,"myEventName")\' >'
+    }
+
+See the section on **Utility Functions** for details of the feedback function.
 
 #### To add and remove a legend
 
@@ -439,7 +454,7 @@ style server by adding a property `wms: true`. You can also set `wms: "grey"` to
 may let you markers be more visible. (see overlay example below).
 
     msg.payload.command.map = {
-        "name":"OSMhot",
+        "name":"OSMhot",  // use "overlay":"MyOverlayName" for an overlay rather than a base layer.
         "url":"https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
         "opt":{ "maxZoom":19, "attribution":"&copy; OpenStreetMap" }
     };

worldmap.js

@@ -372,7 +372,7 @@ module.exports = function(RED) {
         RED.nodes.createNode(this,n);
         this.prop = n.prop || "layer";
         var node = this;
-        var oldl = 0;
+        node.oldlayercount = {};
         node.hulls = {};
 
         var convexHull = function(points) {
@@ -433,11 +433,16 @@ module.exports = function(RED) {
                     newmsg.payload.fillColor = msg.payload.fillColor;
                 }
 
+                if (node.oldlayercount[newmsg.payload[node.prop]] === undefined) {
+                    node.oldlayercount[newmsg.payload[node.prop]] = 0;
+                }
+                var oldl = node.oldlayercount[newmsg.payload[node.prop]];
+
                 if (leafletHull.length === 1 && oldl === 2) {
                     newmsg.payload.deleted = true;
                     node.send(newmsg);
                 }
-                if (leafletHull.length === 2 && (oldl === 1 || oldl ===3)) {
+                if (leafletHull.length === 2 && (oldl === 1 || oldl === 3)) {
                     newmsg.payload.deleted = true;
                     node.send(newmsg);
                     delete newmsg.payload.deleted;
@@ -454,7 +459,7 @@ module.exports = function(RED) {
                     node.send(newmsg);
                 }
 
-                oldl = leafletHull.length;
+                node.oldlayercount[newmsg.payload[node.prop]] = leafletHull.length;
             }
         }
 

worldmap/worldmap.js

@@ -591,8 +591,14 @@ var addThing = function() {
 }
 
 var feedback = function(n,v,a,c) {
-    var fp = markers[n]._latlng;
+    if (markers[n]) {
-    ws.send(JSON.stringify({action:a||"feedback", name:n, layer:markers[n].lay, lat:fp.lat, lon:fp.lng, value:v}));
+        var fp = markers[n]._latlng;
+        ws.send(JSON.stringify({action:a||"feedback", name:n, layer:markers[n].lay, lat:fp.lat, lon:fp.lng, value:v}));
+    }
+    else {
+        if (n === undefined) { n = "map"; }
+        ws.send(JSON.stringify({action:a||"feedback", name:n, value:v}));
+    }
     if (c === true) { map.closePopup(); }
 }
 
@@ -617,7 +623,8 @@ map.on('contextmenu', function(e) {
                 rightmenuMap.setLatLng(e.latlng);
                 map.openPopup(rightmenuMap);
                 setTimeout( function() {
-                    document.getElementById('rinput').focus();
+                    try { document.getElementById('rinput').focus(); }
+                    catch(e) {}
                 }, 200);
             }
         }, 300);
@@ -1019,7 +1026,7 @@ function setMarker(data) {
             rightcontext = "<button onclick='editPoly(\""+data.name+"\",true);'>Edit</button><button onclick='delMarker(\""+data.name+"\",true);'>Delete</button>";
         }
         if ((data.contextmenu !== undefined) && (typeof data.contextmenu === "string")) {
-            rightcontext = data.contextmenu.replace(/\$name/g,data.name);
+            rightcontext = data.contextmenu.replace(/\$name/g,'"'+data.name+'"');
             delete data.contextmenu;
         }
         if (rightcontext.length > 0) {