Add esri feature layer

CHANGELOG.md

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

README.md

@@ -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 = {

package.json

@@ -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",

worldmap/index.html

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

worldmap/worldmap.js

@@ -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 = " © DCJ 2023"
+var pagefoot = " © 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)) {