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

[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?

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

[JohnGravois · Accepted solution]

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