improve geojson overlay rendering options

update readme
This commit is contained in:
Dave Conway-Jones 2023-10-05 14:57:10 +01:00
parent f75b417a0b
commit d964482414
3 changed files with 110 additions and 84 deletions

View File

@ -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)

View File

@ -13,14 +13,14 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
### Updates
- 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.
Allow editing of multipoint geojson tracks.
- 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)
@ -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 <i>true</i> to remove the named marker. (default <i>false</i>)
- **draggable** : set to <i>true</i> to allow marker to be moved by the mouse. (default <i>false</i>)
@ -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 <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 `opt` property is optional. See the <a href="https://leafletjs.com/examples/geojson/">Leaflet geojson docs</a> 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

View File

@ -2467,12 +2467,16 @@ 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) {
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";
@ -2499,7 +2503,12 @@ function doCommand(cmd) {
}
delete feature.properties.style;
return st;
}};
};
}
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 = '<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
if (pw.length > 11) { l.bindPopup(pw); }
@ -2509,6 +2518,7 @@ function doCommand(cmd) {
});
}
}
}
overlays[cmd.map.overlay] = L.geoJson(cmd.map.geojson,opt);
if (!existsalready) {
layercontrol.addOverlay(overlays[cmd.map.overlay],cmd.map.overlay);
@ -2519,6 +2529,8 @@ function doCommand(cmd) {
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") ) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {
@ -2668,17 +2680,11 @@ function doCommand(cmd) {
existsalready = true;
}
var opt = {};
if (cmd.map.hasOwnProperty("options")) { opt = cmd.map.options; }
console.log("OPTS",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;
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);
@ -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) {