What's the most appropriate way to load Mapbox Studio tiles in Leaflet?

Question

I'm updating a Leaflet map's basemap, and I'd like to use Mapbox to create this basemap. At first I thought I would have to ditch Leaflet and switch entirely to Mapbox GL. After digging around in the Mapbox API documentation I found an endpoint for requesting raster tiles from Mapbox Studio styles and I got this working in Leaflet.

Is there a problem with loading the tiles this way? Can I expect this method to work for the foreseeable future despite the emphasis Mapbox has been putting on vector tiles? It seems like my only other option is mapbox-gl-leaflet, which is experimental.

Answer 1

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/

Answer 2

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: "Mapbox Studio"

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

Answer 3

Mapbox has made this less obvious, see the updated image below.

1. On your Mapbox Studio Styles page
2. Click the "Share your style" button:

3. A popup will appear:

3. In the lower section of the popup, select the Third party tab.
4. There’s a drop-down menu likely displaying WMTS, select CARTO.
5. Copy the "Integration URL" link provided. It should have the "{z}/{x}/{y}" part in the URL.