What's the most appropriate way to load Mapbox Studio tiles in Leaflet?
The endpoint for Studio-made styles is available and stable for use with Leaflet.
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer(
'https://api.mapbox.com/styles/v1/mapbox/emerald-v8/tiles/{z}/{x}/{y}?access_token=<your token>', {
tileSize: 512,
zoomOffset: -1,
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(mymap);
Note your tiles will have a zoomOffset that needs to be adjusted for. Also, be sure to use your Style with a token that has the scope styles:tiles
enabled. You can always use Mapbox.js which includes Leaflet as well. Reference: https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-studio-style/
Geografa's answer is referring to tiles made with "Mapbox Studio Classic" (which was originally named "Mapbox Studio"). These "Classic" styles are found on your Mapbox account at https://www.mapbox.com/studio/classic/
(According to mapbox's documentation, the url structure for retrieving the raster tiles had changed since geografa's answer but I received 404 errors loading my "classic" tiles using Mapbox's update URL structure).
As of December 2018, If you're looking to use tiles that were built with Mapbox Studio within Leaflet:
- Go to the list of Styles in Studio (current url is https://www.mapbox.com/studio/)
- click on the 'share & use' button for style you wish to use
- click on the use tab in the new pop-up that appeared
- select "third-party" on left-hand side of menu
- select "Carto" in the new pop-up
Your screen should look like this: "Mapbox Studio"
This "integration URL" is your urltemplate and can be used in leaflet within the L.tileLayer like in this basic leaflet example.