What happened to this Mapbox Tile image?

user_603493 0
Viewed 233

So I'm attempting to get Mapbox working with my Leaflet implementation (using React Leaflet), and my spidey sense is telling me something is off.

The URL:

https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/11/568/825@2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ

Note: I created the access_token used above for this SO question, and will be deleted soon. So the link may not work when you see this, which is why I used SO's handy dandy image upload!

enter image description here

I assume this has something to do with how the tile coordinates and/or zoom is being calculated, but really, I don't have a damn clue in the world.

Using mapbox.mapbox-streets-v4 as the tileset_id produces results that are better, but still bad. I haven't yet been able to load a stylesheet either...

What gives?

mapbox-api-rastertiles react-leaflet mapbox leaflet
2 Answers

As it turns out I was correct in my hunch that it had something to do with how the tiles were being generated by Leaflet. And while I'll probably never know the specific reasons behind it, I was able to solve it. The secret sauce ended up being mapbox-gl-leaflet.

I threw together a super simple example on Code Sandbox showing the successful implementation of Mapbox tiles as a React component within React Leaflet. It's pretty snazzy, IMO, even if you have to import a few hundred different packages (doubly if using TS) to make it all work

https://codesandbox.io/s/sharp-payne-m3hll

NOTE: To see the codesandbox link working, you'll need to supply your own Mapbox API key. The API key from above won't work (even if it was still valid, which it may or may not be depending on how much I care to do anything about it...)

user_6034930

The mapbox.mapbox-streets-v11 tileset from Mapbox is originally intended to be used as vector data, e.g. with Mapbox Vector Tiles API : https://docs.mapbox.com/help/glossary/vector-tiles-api/

The only difference with your URL is the requested format mvt (instead of jpg). And no @2x resolution modifier.

What may be confusing is that the vector tilesets can also be requested as raster, by specifying a raster format like jpg or png through Mapbox Raster Tiles API https://docs.mapbox.com/help/glossary/raster-tiles-api/.

Mapbox server then generates an image from the vector data. But in the case of the streets tileset, it has a lot of data in hand, and it renders all of it, making it appear messed up.

Mapbox provides 5 default tilesets (https://docs.mapbox.com/studio-manual/reference/tilesets/), some of them are raster only (typically Satellite mapbox.satellite) while others are originally vector, but can also be generated as raster (Streets, Terrain, Terrain-RGB/elevation, Traffic).

Unfortunately Leaflet does not handle vector data built-in. If you really need to use vector data, you have to use plugins like Leaflet.VectorGrid or Mapbox GL Leaflet, or another switch to another mapping library.

user_51087960
Related