diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2fbcbec..8c6c5b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
### Change Log for Node-RED Worldmap
- - v3.1.0 - Add esri overlay layers
+ - v3.1.0 - Add esri overlay layers, and let geojson overlay rendering be customised
- v3.0.0 - Bump to Leaflet 1.9.4
Move to geoman for drawing shapes.
Allow command.rotation to set rotation of map.
@@ -8,7 +8,7 @@
- v2.43.1 - Tweak drawing layer double click
- v2.43.0 - Revert leaflet update as it broke Draw
- - v2.42.3 - More KML and GEOJson drag drop fixes
+ - v2.42.3 - More KML and GeoJson drag drop fixes
- v2.42.1 - Remove extraneous debug logging, fix KMZ icons
- v2.42.0 - Add handling for TAK type spots, waypoints, alerts, sensors. Better KML/KMZ handling.
- v2.41.0 - Bump leaflet libs to latest stable (1.9.4)
diff --git a/README.md b/README.md
index 16202d7..9395152 100644
--- a/README.md
+++ b/README.md
@@ -13,14 +13,14 @@ Feel free to [
@@ -58,7 +58,7 @@ The minimum **msg.payload** must contain `name`, `lat` and `lon` properties, for
`name` must be a unique identifier across the whole map. Repeated location updates to the same `name` move the marker.
-Optional properties include
+Optional properties for **msg.payload** include
- **deleted** : set to true to remove the named marker. (default false)
- **draggable** : set to true to allow marker to be moved by the mouse. (default false)
@@ -220,7 +220,9 @@ Defaults are shown above.
### GeoJSON
-If the msg.payload contains a **geojson** property, and no **lat** and **lon**, then
+There are several ways to send GeoJSON to the map.
+
+1) If the msg.payload contains a **geojson** property, and no **lat** and **lon**, then
rather than draw a point it will render the geojson.
msg.payload = {
@@ -255,8 +257,9 @@ Often geojson may not have a `properties` or `style` property in which case you
clickable: true
}
-**Note**: you can just send a msg.payload containing the geojson itself - but obviously you then can't style
-it, set the name, layer, etc.
+2) You can just send a msg.payload containing the geojson itself - but obviously you then can't style it, set the name, layer, etc.
+
+3) You can also add the geojson as a specific overlay, in which case you can also have more control of styles, and per feature customisations. See the section on overlays [below](#to-add-a-new-geojson-overlay). This is the most complex but customisable.
### Options
@@ -415,7 +418,7 @@ msg.payload = { command: { "contextmenu":menu } }
You can also control the map via the node, by sending in a msg.payload containing a **command** object. Multiple parameters can be specified in one command.
-Optional properties include
+Optional properties for **msg.payload.command** include
- **lat** - move map to specified latitude.
- **lon** - move map to specified longitude.
@@ -583,17 +586,24 @@ By default the overlay will be instantly visible. To load it hidden add a proper
"overlay": "myGeoJSON",
"geojson": { your geojson feature as an object },
"opt": { optional geojson options, style, etc },
- "fit": true
+ "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 Leaflet geojson docs for more info on possible options. Note: only simple options are supported as functions cannot be serialised.
+The `opt` property is optional. See the Leaflet geojson docs for more info on possible options.
-The `fit` property is optional, and you can also use `fly` if you wish. If boolean true the map will automatically zoom to fit the area relevant to the geojson, or use the 'fly' to animation style. You can also set `clickable` true to return the properties of the clicked feature to the worldmap-in node.
+NOTE: In order to pass over **style**, **pointToLayer**, **onEachFeature**, or **filter** functions they need to be serialised as follows... for example
-see https://leafletjs.com/examples/geojson/ for more details about options for opt.
+ const style = function () {
+ return { color: "#910000", weight: 2 };
+ };
+ msg.payload.command.map.opt.style = style.toString();
+
+This may cause the function node setting them to be in error, for example if it references L (the leaflet map), which is unknown on the server side. The flow should still deploy and run ok.
+
+The `fit` property is optional, and you can also use `fly` if you wish. If boolean true the map will automatically zoom to fit the area relevant to the geojson, or use 'fly' to set the animated style. You can also set `clickable` true to return the properties of the clicked feature to the worldmap-in node.
#### To add a new KML, GPX, or TOPOJSON overlay
@@ -619,10 +629,20 @@ As per the geojson overlay you can also inject an ESRI ArcGIS FeatureLayer layer
msg.payload.command.map = {
"overlay": "myFeatureLayer",
"esri": "https://services3.arcgis.com/...../0",
- "options": { object of options }
+ "opt": { object of options }
};
-NOTE: you can set various options as [specified here](https://developers.arcgis.com/esri-leaflet/api-reference/layers/feature-layer/#options) - but these don't currently indlude the style oo onEachFeature fnctions as they are non-serialisable across the websocket link.
+NOTE: you can set various options as [specified here](https://developers.arcgis.com/esri-leaflet/api-reference/layers/feature-layer/#options).
+
+In order to pass over **style**, **pointToLayer**, or **onEachFeature** functions they need to be serialised as follows... for example
+
+ const style = function () {
+ return { color: "#910000", weight: 2 };
+ };
+ msg.payload.command.map.opt.style = style.toString();
+
+This may cause the function node setting them to be in error, for example if it references L.marker, which is unknown on the server side. The flow should still deploy and run ok.
+
#### To add a Velocity Grid Overlay
diff --git a/worldmap/worldmap.js b/worldmap/worldmap.js
index 56c70c3..26e3b79 100644
--- a/worldmap/worldmap.js
+++ b/worldmap/worldmap.js
@@ -2467,57 +2467,69 @@ function doCommand(cmd) {
}
}
// Add a new geojson overlay layer
- if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("geojson") ) {
+ if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("geojson")) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {
map.removeLayer(overlays[cmd.map.overlay]);
existsalready = true;
}
- var opt = cmd.map.opt || { style:function(feature) {
- var st = { stroke:true, weight:2, fill:true };
- if (feature.hasOwnProperty("properties")) {
- st.color = feature.properties.color||feature.properties.roofColor||"black";
- if (feature.properties.hasOwnProperty("color")) { delete feature.properties.color; }
- if (feature.properties.hasOwnProperty("roofColor")) { delete feature.properties.roofColor; }
+ try {
+ var opt = cmd.map.opt || {};
+ if (opt.hasOwnProperty("style")) { opt.style = new Function('return ' + opt.style)(); }
+ else {
+ opt.style = function(feature) {
+ var st = { stroke:true, weight:2, fill:true };
+ if (feature.hasOwnProperty("properties")) {
+ st.color = feature.properties.color||feature.properties.roofColor||"black";
+ if (feature.properties.hasOwnProperty("color")) { delete feature.properties.color; }
+ if (feature.properties.hasOwnProperty("roofColor")) { delete feature.properties.roofColor; }
+ }
+ if (feature.hasOwnProperty("properties") && feature.properties.hasOwnProperty('style')) {
+ if (feature.properties.style.hasOwnProperty('stroke')) {
+ st.color = feature.properties.style.stroke;
+ }
+ if (feature.properties.style.hasOwnProperty('stroke-width')) {
+ st.weight = feature.properties.style["stroke-width"];
+ }
+ if (feature.properties.style.hasOwnProperty('stroke-opacity')) {
+ st.opacity = feature.properties.style["stroke-opacity"];
+ }
+ if (feature.properties.style.hasOwnProperty('fill')) {
+ if (feature.properties.style.fill == "none") { st.fill = false; }
+ else { st.fillColor = feature.properties.style.fill; }
+ }
+ if (feature.properties.style.hasOwnProperty('fill-opacity')) {
+ st.fillOpacity = feature.properties.style["fill-opacity"];
+ }
+ }
+ delete feature.properties.style;
+ return st;
+ };
}
- if (feature.hasOwnProperty("properties") && feature.properties.hasOwnProperty('style')) {
- if (feature.properties.style.hasOwnProperty('stroke')) {
- st.color = feature.properties.style.stroke;
- }
- if (feature.properties.style.hasOwnProperty('stroke-width')) {
- st.weight = feature.properties.style["stroke-width"];
- }
- if (feature.properties.style.hasOwnProperty('stroke-opacity')) {
- st.opacity = feature.properties.style["stroke-opacity"];
- }
- if (feature.properties.style.hasOwnProperty('fill')) {
- if (feature.properties.style.fill == "none") { st.fill = false; }
- else { st.fillColor = feature.properties.style.fill; }
- }
- if (feature.properties.style.hasOwnProperty('fill-opacity')) {
- st.fillOpacity = feature.properties.style["fill-opacity"];
+ if (opt.hasOwnProperty("pointToLayer")) { opt.pointToLayer = new Function('return ' + opt.pointToLayer)(); }
+ if (opt.hasOwnProperty("filter")) { opt.filter = new Function('return ' + opt.filter)(); }
+ if (opt.hasOwnProperty("onEachFeature")) { opt.onEachFeature = new Function('return ' + opt.onEachFeature)(); }
+ else {
+ opt.onEachFeature = function (f,l) {
+ var pw = ''+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'';
+ if (pw.length > 11) { l.bindPopup(pw); }
+ 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}));
+ });
+ }
}
}
- delete feature.properties.style;
- return st;
- }};
- opt.onEachFeature = function (f,l) {
- var pw = ''+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'';
- if (pw.length > 11) { l.bindPopup(pw); }
- 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) {
+ layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
}
- }
- overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
- if (!existsalready) {
- layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
- }
- if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
- map.addLayer(overlays[cmd.map.overlay]);
- }
- if (cmd.map.hasOwnProperty("fly") && (cmd.map.fly === true)) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
- else if (cmd.map.hasOwnProperty("fit") && (cmd.map.fit === true)) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
+ if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
+ map.addLayer(overlays[cmd.map.overlay]);
+ }
+ if (cmd.map.hasOwnProperty("fly") && (cmd.map.fly === true)) { map.flyToBounds(overlays[cmd.map.overlay].getBounds()); }
+ else if (cmd.map.hasOwnProperty("fit") && (cmd.map.fit === true)) { map.fitBounds(overlays[cmd.map.overlay].getBounds()); }
+ }
+ catch(e) { console.log(e); }
}
// Add a new NVG XML overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("nvg") ) {
@@ -2663,31 +2675,25 @@ function doCommand(cmd) {
// Add a new ESRI feature layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("esri") ) {
try {
- if (overlays.hasOwnProperty(cmd.map.overlay)) {
- overlays[cmd.map.overlay].removeFrom(map);
- existsalready = true;
- }
- var opt = {};
- if (cmd.map.hasOwnProperty("options")) { opt = cmd.map.options; }
- console.log("OPTS",opt)
- opt.url = cmd.map.esri;
- map.createPane("blockpoints");
- opt.pointToLayer = function (geojson, latlng) {
- console.log("Point geo",latlng, geojson);
- return L.marker(latlng);
- };
- opt.onEachFeature = function (geojson, layer) {
- console.log("Feature",layer, geojson);
- };
- overlays[cmd.map.overlay] = L.esri.featureLayer(opt);
- if (!existsalready) {
- layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
- }
- if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
- overlays[cmd.map.overlay].addTo(map);
- }
- // NOTE can't fit or fly to bounds as they keep reloading
- } catch(e) { console.log(e); }
+ if (overlays.hasOwnProperty(cmd.map.overlay)) {
+ overlays[cmd.map.overlay].removeFrom(map);
+ existsalready = true;
+ }
+ var opt = {};
+ if (cmd.map.hasOwnProperty("opt")) { opt = cmd.map.opt; }
+ if (opt.hasOwnProperty("style")) { opt.style = new Function('return ' + opt.style)(); }
+ if (opt.hasOwnProperty("pointToLayer")) { opt.pointToLayer = new Function('return ' + opt.pointToLayer)(); }
+ if (opt.hasOwnProperty("onEachFeature")) { opt.onEachFeature = new Function('return ' + opt.onEachFeature)(); }
+ opt.url = cmd.map.esri;
+ overlays[cmd.map.overlay] = L.esri.featureLayer(opt);
+ if (!existsalready) {
+ layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
+ }
+ if (!cmd.map.hasOwnProperty("visible") || (cmd.map.visible != false)) {
+ overlays[cmd.map.overlay].addTo(map);
+ }
+ // NOTE can't fit or fly to bounds as they keep reloading
+ } catch(e) { console.log(e); }
}
// Add a new TOPOJSON overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("topojson") ) {
@@ -2896,7 +2902,7 @@ function doCommand(cmd) {
}
// handle any incoming GEOJSON directly - may style badly
-function doGeojson(n,g,l,o) {
+function doGeojson(n,g,l,o) { // name, geojson, layer, options
var lay = l ?? g.name ?? "unknown";
// if (!basemaps[lay]) {
var opt = { style: function(feature) {