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:

  1. Go to the list of Styles in Studio (current url is https://www.mapbox.com/studio/)
  2. click on the 'share & use' button for style you wish to use
  3. click on the use tab in the new pop-up that appeared
  4. select "third-party" on left-hand side of menu
  5. select "Carto" in the new pop-up

Your screen should look like this: Go to styles in studio, share & use button, use, third party, carto"Mapbox Studio"

This "integration URL" is your urltemplate and can be used in leaflet within the L.tileLayer like in this basic leaflet example.