Large amount of data points to esri-leaflet

Question

Hi,

I have made a leaflet web application (https://alsi.gie.eu/data-visualisation/maps), next I wish to add layers on top which are hosted on https://services.arcgis.com/W1S2EV01pfLNmn8R/arcgis/rest/services/network1908/FeatureServer.

I have tried using the layers directly hosted on the featureserver, but found this too be very data intensive. Whenever I zoomed in, the entire application crashed; because of the redrawing. I have added it as such:

L.esri.featureLayer({
url: 'https://services.arcgis.com/W1S2EV01pfLNmn8R/arcgis/rest/services/network1908/FeatureServer/9',
style: function () {
return { color: "#c29ed7", weight: 0.5, opacity: 0.5, stroke: true, fill: false };
}
}).addTo(map);

I then came across similar issues on https://github.com/Esri/esri-leaflet/issues/738. I figured that I would need to either convert the FeatureServer to MapServer or find another solution that basically projects an image instead of the entire shapefile onto the leaflet map. Can anybody point me in the right direction here? It would be really helpful if you explain the steps, as I'm not very proficient in ARCGIS/ESRI.

Raul_Jimenez · Answer

Hi @DanielDormont  I just read "Evaluating the Performance of Three Popular Web Mapping Libraries: A Case Study Using Argentina’s Life Quality Index" (compares Leaflet, Mapbox GL JS and OpenLayers) and remembered me this thread:

...And leaflet does work with WebGL, via esri-leaflet-vector, doesn't it? In fact that's something I've been wondering. Since we already use esri-leaflet-vector to show vector basemaps, is there not a way to use that same technology with feature layers?

Spoiler of the conclusions 😜:

I will see if I can do my own research and include the ArcGIS API for JS too to the equation 😉, it would be nice to have a rigorous analysis considering them all and different visualization types.

Raul_Jimenez · Answer

Sorry @DanielDormont for the delay!

And leaflet does work with WebGL, via esri-leaflet-vector, doesn't it? In fact that's something I've been wondering. Since we already use esri-leaflet-vector to show vector basemaps, is there not a way to use that same technology with feature layers?

I don't think there is an easy way.

As you can see vector basemaps relies on maplibre-gl-js, and basemap tile services and feature layers services are very different. esri-leaflet-vector, but it would be better to ask in the repo.

I guess by "generic" I just meant that Leaflet can pull data including basemaps from any source; we have some customers who have their own custom data sources they want to use.

🤔... did you know that the JS API can also be used with any custom data source? I mean, there are some standard layers (GeoJSON, CSV, KML, WFS, ...) , and if none of them fit, you can also do it by drawing directly in a GraphicsLayer (in memory) or populating a FeatureLayer using an array graphics (example).

In fact, we even have a few applications where the coordinate data aren't geographic at all, and we use https://leafletjs.com/examples/crs-simple/crs-simple.html to display them.

I agree that for use cases like this one I wouldn't use the ArcGIS Maps SDK for JavaScript either :) .

I hope you have a happy new year eve!! 🥳

DanielDormont · Answer

Hi @Raul_Jimenez thanks for the reply, that's very interesting. I guess by "generic" I just meant that Leaflet can pull data including basemaps from any source; we have some customers who have their own custom data sources they want to use. In fact, we even have a few applications where the coordinate data aren't geographic at all, and we use https://leafletjs.com/examples/crs-simple/crs-simple.html to display them.

And leaflet does work with WebGL, via esri-leaflet-vector, doesn't it? In fact that's something I've been wondering. Since we already use esri-leaflet-vector to show vector basemaps, is there not a way to use that same technology with feature layers?