ESRI Basemap Styles Don't Work Because of Relative URLs Hidden Within Nested Styles

[ngottlieb]

Steps to Trigger Behavior

1. use ESRI basemap as styleURL property - e.g. https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/outdoor?token=${accessToken}

Actual Behavior

Style fails to load with this error:

MapLibre error Requesting: tile/1/0/0.pbf failed with error: Error Domain=NSURLErrorDomain Code=-1002 "unsupported URL" UserInfo={NSLocalizedDescription=unsupported URL, NSErrorFailingURLStringKey=tile/1/0/0.pbf, NSErrorFailingURLKey=tile/1/0/0.pbf, _NSURLErrorRelatedURLSessionTaskErrorKey=("LocalDataTask...

Additional context

ESRI styles unfortunately don't conform fully to the TileJSON spec. This is a known issue in the maplibre-gl-js repo and there's been a variety of discussion about how to deal with it (e.g. maplibre/maplibre-gl-js#182). What seems like the best current solution was merged in maplibre/maplibre-gl-js#4962 a month ago — it allows the use of transformStyle to fix relative URLs that are encountered. I know that neither transformStyle nor transformRequest are currently available in the native library (#424), so pending that, I was just wondering if there are any workarounds for this. Presumably others have encountered this problem!

Unfortunately, retrieving the style, processing it, and then feeding it in as styleJSON prop doesn't solve the problem because the relative URLs are not in the initially retrieved JSON, but at another URL referenced as the URL for one of the sources, e.g. here:

"sources":{"esri":{"type":"vector","url":"https://basemaps-api.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer","attribution":"Sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community","copyrightText":"Sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, © OpenStreetMap contributors, and the GIS User Community","maxzoom":16,"minzoom":0,

[KiwiKilian]

I'm familiar with the problem and mostly solved it by self hosting both JSONs.

Is it possible, that there is a similar URL available for that style, which complies with the spec? They have docs on usage with MapLibre so I would expect the styles here to work: https://developers.arcgis.com/maplibre-gl-js/styles-and-data-visualization/display-a-custom-basemap-style/.

[ngottlieb]

Unfortunately both the old v1 styles (no longer documented) and the newer ones seem to include a reference to a second style that does not comply with the spec. We haven't had any issues running it in maplibre-gl on the web with the v1 styles, so I guess it's handling it smoothly there somehow? I confirmed that the styles our web app is retrieving also have the same problem. the rest of my team on this project is going to have a look at #424 to see if we can resolve it by contributing, but I've also tried out the self-hosting strategy you suggested and that does get the job done at least for now.