Possible to load ESRI raster tiles in Mapbox GL JS?

622
5
10-12-2020 07:16 PM
AlexanderKennedy
New Contributor

Is it possible to load ESRI raster tiles from a tiles.arcgis.com service? In this mapbox demo, the line that specifies the basemap tiling service (from Stamen, in this case) is this:

'tiles': [
   'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'
],

When I edit the fiddle example, however, and try to substitute a tileset I'm interested in using, it doesn't seem to work:

'tiles': [

   'https://tiles.arcgis.com/tiles/QcN4ko50whTktDF1/arcgis/rest/services/Ortho_Midland2020_0520and0521/MapServer/tile/{z}/{x}/{y}.jpg'

],

I was able to get direct access to some of the individual tiles, like this, but can't seem to get the URL string right. Here is a page that has metadata, as well as the start and end tiles for each zoom level.

Can someone please point out where I'm going wrong with that URL string? I've also changed the initial zoom and x/y to be relevant to the dataset:

center: [-84.39479, 43.820487],
zoom: 11

Here is a fiddle that I've been trying out various URLs in. I would super appreciate pointers about how to format the ESRI tileset URL for use in mapbox gl js. Thanks in advance!

0 Kudos
5 Replies
jmcbroom
New Contributor II
AlexanderKennedy
New Contributor

Thanks, @jmcbroom! Any chance you could get it to work in this codepen example? (See below // These tiles DON'T work).

I was able to get the following "tiles" url (similar to what you linked but shorter) working just fine in leaflet using esri-leaflet:

https://tiles.arcgis.com/tiles/QcN4ko50whTktDF1/arcgis/rest/services/Ortho_Midland2020_0520and0521/M...

Here is a live, working example in Observable. However, I still cannot figure out how to do the same thing in Mapbox. It seems a different "tiles" url is required for Mapbox... I just don't know what it could be, or if it's even possible to load ESRI tiles in Mapbox. If you're able to get a working example (in my codepen, jsfiddle, observable, etc.) please do share.

Thank you!

0 Kudos
jmcbroom
New Contributor II

i'll be honest i'm not able to get it working into that codepen for some reason. but when i sub this URL into one of my existing projects which loads raster tiles.. it works.

 

0 Kudos
jmcbroom
New Contributor II

the codepen error is complaining about a string literal or a newline somewhere

0 Kudos
AlexanderKennedy
New Contributor

A friend of mine ended up figuring it out. Thanks for the help! Solution here:

tiles: [ 'https://tiles.arcgis.com/tiles/QcN4ko50whTktDF1/arcgis/rest/services/Ortho_Midland2020_0520and0521/M...}'
]

0 Kudos