4

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.

9

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/

  • 1
    Did this work for you? I'm getting all blank tiles. – nortchuck May 8 '18 at 19:59
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.