stuck when rendering ArcGIS WMS data to Leaflet

Community Help
1

Hi Community!

Following our Earth Day talk with colleagues working with NOAA, I am trying to render some of their map data in Leaflet. Despite following patterns that we’re previously working, I am unsuccessful at rendering the maps. Can you help?

Here’s an example data layer as it should look:

https://coast.noaa.gov/arcgis/rest/services/Imagery/3Band_CIR_8Bit_Imagery/ImageServer?f=jsapi

I can get responses from the WMS layer using a few different endpoints:

EDIT: @mootari is helping to figure this out so we’re breaking some of the code that rendered when I first posted this question.

However, try as I might, I can’t get any of these to appear in Leaflet. Here’s a scratch notebook:

And suggestions or insights?

Thanks in advance! :pray:

2

When you open your dev tools you can see tons of 404 errors for the tile URLs that you construct. Apparently coast.noaa.gov does not support the z/y/x format, but instead expects a bounding box.

Here’s an example set of parameters as sent by the application in your first link:

bbox: -9194686.141828956,3416920.3859493886,-8527377.876828974,4174914.1331160353
bboxSR: 102100
imageSR: 102100
size: 780,886
format: jpgpng
compressionTolerance: 0.01
mosaicRule: {"mosaicMethod":"esriMosaicNorthwest","mosaicOperation":"MT_FIRST","sortField":""}
pixelType: f32
f: image
1 Like
3

Thanks @mootari ! I saw the errors but wasn’t sure what to make of them… or how to resolve!

A couple of follow up questions:

  1. How did you get from seeing those 403/404 errors to understanding that the issue had to do with the non-supported z/x/y format?
  2. Now that you’ve identified this issue - where to go from here in terms of rendering the map tiles?
4

By checking the fetched URLs:

  • This is what you query:
    https://coast.noaa.gov/arcgis/rest/services/Imagery/3Band_CIR_8Bit_Imagery/ImageServer/tile/7/48/39
  • This is what the application queries:
    https://coast.noaa.gov/arcgis/rest/services/Imagery/3Band_CIR_8Bit_Imagery/ImageServer/exportImage?bbox=-9194686.141828956%2C3416920.3859493886%2C-8527377.876828974%2C4174914.1331160353&bboxSR=102100&imageSR=102100&size=780%2C886&format=jpgpng&compressionTolerance=0.01&mosaicRule=%7B%22mosaicMethod%22%3A%22esriMosaicNorthwest%22%2C%22mosaicOperation%22%3A%22MT_FIRST%22%2C%22sortField%22%3A%22%22%7D&pixelType=f32&f=image   ```

There may very well be other query formats, but I haven’t found one for tiles so far.

@mourner demonstrates how to map lat/lon/zoom to OSM tile indices:

I would think that you need to adjust your URL construction to calculate the bounding box from x/y/z offsets for the exportImage request.

Edit:
I think what you actually need is a Leaflet ImageOverlay:
https://leafletjs.com/reference-1.7.1.html#imageoverlay

This should give you the bounding box which you can then work into your arcgis URL. I have to dive deeper into the leaflet docs. Haven’t found an implementation yet where the bounds would get passed to a callback.

1 Like
5

I see that you’re already using esri-leaflet. However, the layer type you need to use is:
https://esri.github.io/esri-leaflet/api-reference/layers/image-map-layer.html

This will correctly produce /exportImage URLs.

1 Like
6

For those interested: @mootari is sleuthing through this one, but it’s turning out not to be the easiest nut to crack! The notebook is changing and @mootari’s introduced a lot of great clean-up, which is a great resource for those working with Leaflet maps in Observable. We’ll keep you updated if / when we hit on a solution (well, when Fabian hits it :wink: )

7

OK, got it working by switching to module imports via https://jspm.org/ (jspm.dev).

My working theory is that leaflet and esri-leaflet referenced different instances of LatLngBounds, which caused an instantiation to fail when toLatLngBounds() checks the instance type of a passed argument.

1 Like
8

Amazing! Thank you for all the time you invested into this! I’ll update our events page, reference this discussion, and also will render out a few different maps to keep the conversation going. Thank you so much!

1 Like