How to diagnose error rendering Esri_2020_Land_Cover_V2 in Leaflet?

[aaronkyle]

Dear Community.

I am trying to load in ESRI's new 10m land cover data to a Leaflet map, but having trouble.  I can call the WMS and receive a response, e.g.:

`d3.json('https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/...')`

returns an Object:

Object {

currentVersion: 10.81

name: "Esri_2020_Land_Cover_V2"

serviceDescription: ""

description: ""

type: "ImageServer"

capabilities: "Image,TilesOnly"

copyrightText: ""

serviceItemId: "d6642f8a4f6d4685a24ae2dc0c73d4ac"
...

However, when I try using esri.imageMapLayer to reference the resource, I start getting errors.   E.g. this code returns a 400 'Bad Request'

Esri_2020_Land_Cover = () =>
esri.imageMapLayer({ // I think we must use .imageMapLayer b/c the REST API service is an ImageServer rather than a map server
url: 'https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/...',
attribution:
'Esri_2020_Land_Cover_V2 ImageServer'
//maxZoom: 17
})

The browser network tells me that the request fails at:

https://tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/...

This looks like a server-side issue?  If so, how can I flag it to the ESRI team? It would be great to be able to use this fantastic new layer dynamically...

It's noteworthy that this same pattern works just fine for similar ArcGIS image server layers, e.g.

Band_CIR_image = () =>
esri.imageMapLayer({ // I think we must use .imageMapLayer b/c the REST API service is an ImageServer rather than a map server
url: 'https://coast.noaa.gov/arcgis/rest/services/Imagery/3Band_CIR_8Bit_Imagery/ImageServer?f=json',
attribution:
'NOAA Office for Coastal Management: https://coast.noaa.gov/arcgis/rest/services/Imagery/3Band_CIR_8Bit_Imagery/ImageServer'
//maxZoom: 17
})

[GavinRehkemper]

Hi, thanks for the question. It looks like that service is a "Tiled Imagery Layer" (see that on the item details page). Given that, I think it would probably be better to use L.esri.tiledMapLayer().

I tested using L.esri.tiledMapLayer(): https://codepen.io/gavinr/pen/QWvvdpm?editors=0010 If you open the developer console, you'll see the message "L.esri.TiledMapLayer is using a non-mercator spatial reference". In other words, the service is published in a non-web-mercator WKID. Specifically it's using WGS84 (4326). So the first task will be to get that 4326 layer onto your map. See these resources:

• http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html
• https://leafletjs.com/reference-1.7.1.html#map-crs
• https://leafletjs.com/reference-1.7.1.html#crs-l-crs-epsg4326

Additionally, if you look more at that service, you'll notice the format is LERC2D. I do not think L.esri.tiledMapLayer() will currently support that. There was a discussion on supporting this in Esri Leaflet: https://github.com/Esri/esri-leaflet/issues/726

That issue was closed due to lack of activity, but perhaps with interest in this new service (and others like it)  now is the time. If you'd like to chime in on that issue or create a new one, your feedback (or code contributions, if you figure out how to do it) would be appreciated.

[aaronkyle]

I Gavin! Thank you for your time and help!  I see that your CodePen was still not able to load the layer? Switching to `tiledMapLayer` s gives me a 404 on called resources, e.g.:

tiledimageservices.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Esri_2020_Land_Cover_V2/ImageServer/tile/13/3060/2455

(plus a stack of about 5 other failed requests). This still looks like a server-side issue?

Thanks also for your notes and guidance on projections. I am new to this and learning.  WGS(84) (4326) is (in my understanding) the correct default for Leaflet, so that shouldn't be an issue?

Thank you for pointing me to the GitHub issues. I'll also raise an additional comment there.

It's weird, b/c I have no issue with similar layers.  Here's an example:

https://observablehq.com/@ambassadors/3band_cir_8bit_imagery

From your comments, I still have to learn more to distinguish how / in what format different layers are served.  It's still a bit cryptic to me 😞 thank you for your time and guidance!

Happy for more help to diagnose and resolve!

Sincerely,

Aaron

[Anonymous User]

Aaron, thanks for commenting as well in the related GitHub issue for esri-leaflet. I've continued with some fresh comments over there. https://github.com/Esri/esri-leaflet/issues/726

But yes, we'll need to get Leaflet into WGS84 (wkid 4326) instead of its default Spherical Mercator (wkid 3857). Then, we'll look into experimenting with decoding LERC tiles manually.

[Anonymous User · Accepted solution]

A solution is outlined here with a live demo and code sample: https://github.com/Esri/esri-leaflet/issues/726#issuecomment-884481812

[aaronkyle]

Wow Jacob!  This is beautiful (and very complex).  Thank you!
For fun, here's your code ported to an Observable notebook--properly attributed and licensed 😉 
https://observablehq.com/@aaronkyle/esri-2020-land-cover
Thanks for your generosity and expertise!

[aaronkyle]

Dear Jacob, Gavin and Community:
I really appreciate your time and help on this!  Having re-worked through Gavin's initial reply, I learned a lot about diagnosing errors (I found the console messages I initially missed in my first reply), determining map service types, etc.  This is all very helpful!  Thank you.  I caught another message form Jacob via GitHub [https://github.com/Esri/esri-leaflet/issues/726]: it's incredible the help you're sharing! Thank you so much.