Add esri feature layer

This commit is contained in:
Dave Conway-Jones 2023-10-04 17:31:32 +01:00
parent 37dc50ceea
commit f75b417a0b
6 changed files with 60 additions and 4 deletions

View File

@ -1,5 +1,6 @@
### Change Log for Node-RED Worldmap
- v3.1.0 - Add esri overlay layers
- v3.0.0 - Bump to Leaflet 1.9.4
Move to geoman for drawing shapes.
Allow command.rotation to set rotation of map.

View File

@ -13,6 +13,7 @@ Feel free to [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%
### Updates
- v3.1.0 - Add esri overlay layers
- v3.0.0 - Bump to Leaflet 1.9.4
Move to geoman for drawing shapes.
Allow command.rotation to set rotation of map.
@ -611,6 +612,18 @@ As per the geojson overlay you can also inject a KML layer, GPX layer or TOPOJSO
Again the boolean `fit` or `fly` properties can be added to make the map zoom to the relevant area, and the `visible` property can be set false to not immediately show the layer.
#### To add an ESRI FeatureLayer overlay
As per the geojson overlay you can also inject an ESRI ArcGIS FeatureLayer layer. The syntax is the same but with an `esri` property containing the url of the desired feature layer.
msg.payload.command.map = {
"overlay": "myFeatureLayer",
"esri": "https://services3.arcgis.com/...../0",
"options": { 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.
#### To add a Velocity Grid Overlay
msg.payload.command.map = {

View File

@ -1,6 +1,6 @@
{
"name": "node-red-contrib-web-worldmap",
"version": "3.0.0",
"version": "3.1.0",
"description": "A Node-RED node to provide a web page of a world map for plotting things on.",
"dependencies": {
"@turf/bezier-spline": "~6.5.0",

View File

@ -75,6 +75,7 @@
<script src="leaflet/leaflet.mousecoordinate.js"></script>
<script src="leaflet/leaflet.latlng-graticule.js"></script>
<script src="leaflet/VectorTileLayer.umd.min.js"></script>
<script src="leaflet/esri-leaflet.js"></script>
<script src="leaflet/Semicircle.js"></script>
<script src='leaflet/leaflet-arc.min.js'></script>
<script src='leaflet/leaflet.antimeridian-src.js'></script>

File diff suppressed because one or more lines are too long

View File

@ -18,7 +18,7 @@ var menuOpen = false;
var clusterAt = 0;
var maxage = 900; // default max age of icons on map in seconds - cleared after 10 mins
var baselayername = "OSM grey"; // Default base layer OSM but uniform grey
var pagefoot = "&nbsp;&copy; DCJ 2023"
var pagefoot = "&nbsp;&copy; DCJ 2023";
var inIframe = false;
var showUserMenu = true;
var showLayerMenu = true;
@ -81,10 +81,10 @@ var connect = function() {
if (data.hasOwnProperty("type") && data.hasOwnProperty("data") && data.type === "Buffer") { data = data.data.toString(); }
handleData(data);
}
catch (e) { if (data) { console.log("BAD DATA",data); console.log(e) } }
catch (e) { if (data) { console.log("BAD DATA",data); console.log(e); } }
// console.log("DATA",typeof data,data);
};
}
};
console.log("CONNECT TO",location.pathname + 'socket');
var handleData = function(data) {
@ -2660,6 +2660,35 @@ 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()); }
}
// 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); }
}
// Add a new TOPOJSON overlay layer
if (cmd.map && cmd.map.hasOwnProperty("overlay") && cmd.map.hasOwnProperty("topojson") ) {
if (overlays.hasOwnProperty(cmd.map.overlay)) {