6

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.

11

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/

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

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.

| improve this answer | |
0

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:

enter image description here

  1. A popup will appear:

enter image description here

  1. In the lower section of the popup, select the Third party tab.
  2. There’s a drop-down menu likely displaying WMTS, select CARTO.
  3. Copy the "Integration URL" link provided. It should have the "{z}/{x}/{y}" part in the URL.
| improve this answer | |
  • Is there any way to do this programmatically, if you have hundreds of tiles, adding them to studio and then getting the link for each doesn’t make sense. Is there no end point to directly access the tile set without going through studio? – bw4sz Jun 25 at 15:37
  • I'm not sure. I'd recommend posting this as a new question. – Cyrille Jun 25 at 16:56

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.