[GIS] Adding a Mapbox Studio basemap to leaflet

basemapjsonleafletmapboxtiles

I am using Mapbox Studio, customized a nice basemap, and downloaded it. It downloaded as a .json file with a couple thousand lines of code.

enter image description here

enter image description here

I want to be able to use this basemap (called basemap.json) in leaflet, like:

var basemap = L.tileLayer("data/basemap.json", {
maxZoom: 17,
minZoom: 9
}).addTo(map);

but that doesn't seem to work.

Any suggestions on how to load a custom Mapbox Studio basemap into leaflet?

Best Answer

So the json file you've got contains the styles to work with mapbox.gl which isn't the same as leaflet.

Mapbox have however put together a library to make mapboxgl stuff talk to leaflet. Documentation is pretty spare but look at the examples and hopefully that gives you a few ideas.

Regarding self-hosting vector tiles it is certainly possible, see this post and I've also thrown together a github repo which shows something similar.

Hope that helps, Rowan

Related Question