VectorTileLayer using MapBoxServices doesn't work with satellite-streets

Question

Hi guys,

I'm experiencing some problem in adding the "satellite-streets" mapBox vectorTileLayer in a mapView. I use the same code as shown in the documentation : "VectorTileLayer | API Reference | ArcGIS API for JavaScript 4.0".

I can successfully add the satellite, streets, dark etc... from MapBox but it doesn't work with the satellite-streets vectorTileLayer.

I was able to add this layer in AGOL in a map, by adding data from the web as tileLayer.

Here is a little code snippet that show the behavior Edit fiddle - JSFiddle  (you have to provide your own developper access_token to test it), and you will see that all vectorTileLayer from mapBox are working, only the satellite-streets vectorTile doesn't work.

I can't figure out why this doesn't work.

Thanks in advance for any help!

FC_Basson · Answer

Glad to help.  To close the question, please mark the answer as correct if the solution is sufficient.

Jean-MarcRoy · Answer

Thanks FC Basson!

Works fine, I tried earlier with the WebTileLayer but was experiencing some bug with the tile position, because I used the wrong urlTemplate: " 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/@{level}/{col}/{row}@2x?access_token=' + token"

I will use this for the moment!

FC_Basson · Answer

I could get your example working by using a WebTileLayer instead (WebTileLayer | API Reference | ArcGIS API for JavaScript 4.0 ).  Define your tileLayer2 like this:

var tileLayer2 = new WebTileLayer({
  urlTemplate: 'https://{subDomain}.tiles.mapbox.com/v4/mapbox.streets-satellite/{level}/{col}/{row}.png?access_token=' + token,
  subDomains: ['a', 'b']
});