improve geojson overlay rendering options

update readme
pull/205/head^2
Dave Conway-Jones 12 months ago
parent f75b417a0b
commit d964482414

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

@ -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.
NOTE: In order to pass over **style**, **pointToLayer**, **onEachFeature**, or **filter** 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();
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.
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.
see https://leafletjs.com/examples/geojson/ for more details about options for opt.
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

@ -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 = '<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
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 = '<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>';
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) {

Loading…
Cancel
Save