nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Trying to figure out the best way to add a online layer to a leaflet map

EzraBoyd

I am trying to add layer 12 (warnings) in this services directory to a Leaflet map: https://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer

Unfortunately, neither WMS or ESRI feature layer format seems to work well. WMS performs quickly, but I haven't been able to get popup info windows to work properly. With ESRI feature layer, it is the opposite: the info windows work great, but the large vector layer slows everything down. What other options do I have?

(Most of my experience is in the desktop GIS, so I am still not 100% on the different formats and specifications for webGIS.)

Find more posts tagged with

Esri Leaflet

Accepted answers

JohnGravois

instead of loading the layer as a WMS service, you might consider loading a dynamicMapLayer and calling `identify()` when the map is clicked to display in your popup.

live sample:

http://esri.github.io/esri-leaflet/examples/identifying-features.html

another option would be to set the appropriate constructor properties to generalize the geometries of the featureLayer.

http://esri.github.io/esri-leaflet/examples/simplifying-complex-features.html

you can find more information on the differences between different esri-leaflet layer types in the tutorial below.

http://esri.github.io/esri-leaflet/tutorials/introduction-to-layer-types.html

All comments

JoshuaBixby

Can you elaborate on "haven't been able to get popup info windows to work properly." What behavior are you seeing and what are you expecting?

JohnGravois

instead of loading the layer as a WMS service, you might consider loading a dynamicMapLayer and calling `identify()` when the map is clicked to display in your popup.

live sample:

http://esri.github.io/esri-leaflet/examples/identifying-features.html

another option would be to set the appropriate constructor properties to generalize the geometries of the featureLayer.

http://esri.github.io/esri-leaflet/examples/simplifying-complex-features.html

you can find more information on the differences between different esri-leaflet layer types in the tutorial below.

http://esri.github.io/esri-leaflet/tutorials/introduction-to-layer-types.html

EzraBoyd

Thanks.

L.tilelayer.WMS lets you add WMS layers, but it does not support popup windows out the box. At one point, the leaflet.wms.js plugin let me have that feature, but I had no control over the content and format. Then that just stopped working out of the blue (I think ESRI updated how they serve WMS.) From other research and forums, I know that I need to do a GetFeatureInfo request & pass that to an html object, but I don't know how to do that and haven't found any tutorials.

When using L.esri.FeatureLayer, I have control over the pop-up info window, but the vector data takes much longer to download. It also freezes on mobile devices. I've tweaked the precision and renderer options, and that has gotten me some improvement.

EzraBoyd

Thanks for the info.

Sounds like dynamicMapFeature is a newer version of WMS, in that it sends raster depictions of the data instead of the vector data. Am I reading that correctly?

Also, the docs page for L.esri.FeatureLayer says that simplifyFactor has to be integer:

L.esri.FeatureLayer | Esri Leaflet

But the example shows decimal values, so are those allowed?

JohnGravois

dynamicMapLayer fetches a raster depiction of the data using the export operation of a service published to ArcGIS Server. WMS is a comparable, OGC compliant resource.

http://resources.arcgis.com/en/help/arcgis-rest-api/index.html#/Export_Map/02r3000000v7000000/

The value passed as a simplifyFactor is as a multiplier to generate an appropriate maxAllowableOffset to pass to the service to remove extraneous vertices without affecting the shape of the result geometry too severely. You're correct that it can accept any number, not just an integer.

relevant source:

esri-leaflet/Query.js at 9ad267e62410c7c1c7229a6cb77fcd80c660d3ad · Esri/esri-leaflet · GitHub

i've logged a documentation issue to make sure it gets fixed:

https://github.com/Esri/esri-leaflet-doc/issues/123

EzraBoyd

Thanks again John. I really appreciate your help here.

Do you have any idea why this code is not working?

//Add weather warnings
var weather = L.layerGroup();
var URL2 = "http://igems.doi.gov/arcgis/rest/services/igems_haz/MapServer";

L.esri.dynamicMapLayer({
url: URL2,
layers: 12,
opacity : 0.25,
useCors: false
}).addTo(weather);

weather.addTo(map);

The layer works when I use L.esri.featureLayer (albeit slow and memory intensive).

Thanks again!!!

JohnGravois

layers expects an array `layers: [12]`, but other than that i don't see any problems with your code.

live working sample

http://jsbin.com/vovunun/edit?html,output

if you snoop the network traffic, do you see an 'export' request and valid response from your map service?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.