2

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?

Jeff
  • 340
  • 1
  • 4
  • 16
  • 1
    To help the debugging process, other tiles close by in the same zoom range look equally distorted: https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/11/568/824@2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ, https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/11/568/823@2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ – Seth Lutske Nov 24 '21 at 04:52
  • 1
    Even one zoom level less (10) looks a bit busy: https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/10/208/403@2x.jpg?access_token=pk.eyJ1IjoiamFtaWxsZXI2MTkiLCJhIjoiY2t3Y3JnbG5uMzZ2MzJ1bmhyaHhpczJpcCJ9.3X8OkNioN_C8CN15YPmDDQ. Something is weird with this tileset altogether...sounds like an issue on mapbox's end – Seth Lutske Nov 24 '21 at 04:55

2 Answers2

0

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...)

Jeff
  • 340
  • 1
  • 4
  • 16
  • Leaflet does not generate tiles, on the contrary of Mapbox service. You may mean something else? – ghybs Nov 25 '21 at 02:20
  • Your CodeSandbox example uses a different Mapbox style, and since you use Mapbox GL, it gets vector data instead of raster tiles as shown in your question. So there is still the high possibility that the raster Mapbox street style has a generation issue. – ghybs Nov 25 '21 at 02:29
  • Yeah, sorry I meant the tile URL. It's my belief that the issue is due to how Leaflet generates tile URL strings, something is off there. Which makes sense, otherwise, why would `mapbox-gl-leaflet` even exist, if Leaflet could generate correct Mapbox tile image URLs out of the box. – Jeff Nov 29 '21 at 21:25
  • I am not sure I follow your reasoning? Leaflet applies the Tile URL template you specify in `L.tileLayer(urlTemplate)` and gets a raster image generated server side from Mapbox in your case. – ghybs Nov 30 '21 at 02:51
0

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.

ghybs
  • 47,565
  • 6
  • 74
  • 99