Add esri feature layer
This commit is contained in:
parent
37dc50ceea
commit
f75b417a0b
@ -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.
|
||||
|
13
README.md
13
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 = {
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
12
worldmap/leaflet/esri-leaflet.js
Normal file
12
worldmap/leaflet/esri-leaflet.js
Normal file
File diff suppressed because one or more lines are too long
@ -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)) {
|
||||
|
Loading…
Reference in New Issue
Block a user