Let geojsn features optionally be clickable

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v2.14.0 - Let geojson features be clickable if added as overlay
  - v2.13.4 - Fix list of map choices to be in sync. Fix popup auto sizing.
  - v2.13.3 - Fix unchanged layer propagation.
  - v2.13.2 - Add mayflower icon.

README.md

@@ -11,6 +11,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v2.14.0 - Let geojson features be clickable if added as overlay
 - v2.13.4 - Fix list of map choices to be in sync. Fix popup auto sizing.
 - v2.13.3 - Fix unchanged layer propagation.
 - v2.13.2 - Add mayflower icon.
@@ -217,7 +218,8 @@ Often geojson may not have a `properties` or `style` property in which case you
         "geojson": {
             "type": "LineString",
             "coordinates": [[0,0],[0,90]]
-        }
+        },
+        clickable: true
     }
 
 **Note**: you can just send a msg.payload containing the geojson itself - but obviously you then can't style
@@ -520,13 +522,14 @@ By default the overlay will be instantly visible. To load it hidden add a proper
         "geojson": { your geojson feature as an object },
         "opt": { optional geojson options, style, etc },
         "fit": true
+        "clickable": false
     };
 
 The geojson features may contain a `properties` property. That may also include a `style` with properties - stroke, stroke-width, stroke-opacity, fill, fill-opacity. Any other properties will be listed in the popup.
 
 The `opt` property is optional. See the <a href="https://leafletjs.com/examples/geojson/">Leaflet geojson docs</a> for more info on possible options. Note: only simple options are supported as functions cannot be serialised.
 
-The `fit` property is optional. If boolean true the map will automatically zoom to fit the area relevant to the geojson.
+The `fit` property is optional. If boolean true the map will automatically zoom to fit the area relevant to the geojson. You can also set `clickable` true to return the properties of the clicked feature to the worldmap-in node.
 
 see https://leafletjs.com/examples/geojson/ for more details about options for opt.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "2.13.4",
+    "version": "2.14.0",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap/worldmap.js

@@ -2135,6 +2135,11 @@ function doCommand(cmd) {
         }};
         opt.onEachFeature = function (f,l) {
             l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
+            if (cmd.map.hasOwnProperty("clickable") && cmd.map.clickable === true) {
+                l.on('click', function (e) {
+                    ws.send(JSON.stringify({action:"clickgeo",name:cmd.map.overlay,type:f.type,properties:f.properties,geometry:f.geometry}));
+                });
+            }
         }
         overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
         if (!existsalready) {
@@ -2488,6 +2493,11 @@ function doGeojson(n,g,l,o) {
     }
     opt.onEachFeature = function (f,l) {
         if (f.properties) { l.bindPopup('<pre style="overflow-x: scroll">'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>'); }
+        if (o.hasOwnProperty("clickable") && o.clickable === true) {
+            l.on('click', function (e) {
+                ws.send(JSON.stringify({action:"clickgeo",name:n,type:f.type,properties:f.properties,geometry:f.geometry}));
+            });
+        }
     }
     markers[n] = L.geoJson(g,opt);
     markers[n].lay = lay;