Map IDs to add Mapbox basemaps to Leaflet or OpenLayers

Question

I would like to add Mapbox basemaps to Leaflet or OpenLayers, but I am missing the map IDs.

Before Mapbox Editor was deactivated, one could easily create and save a map, copy that map's ID and your personal API token and then include the map in Leaflet or OpenLayers by using the following URL, replacing my.map and your < access token here >:

http://a.tiles.mapbox.com/v4/my.map/{z}/{x}/{y}.png?access_token=<your access token here>

This still works. But only if you have existing maps from before Mapbox Editor was deactivated on January 31, 2017.

How do new users, who cannot save maps and therefore do not have a personal map ID, go about formatting the URL? New users get an API token but they cannot save maps anymore and thereby get a map ID.

So, how can the following Mapbox basemaps be accessed now:

• Classic
• Light
• Dark
• Satellite
• Satellite Streets
• Wheatpaste
• Streets Classic
• Comic
• Outdoors
• Run, Bike, Hike
• Pencil
• Pirates
• Emerald
• High Contrast

I found a post on Stack Overflow, which shows that the URL can be formatted this way:

 https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}

So, you do not necessarily need a personal map ID as every public Mapbox basemap seems to have an ID.

I have tested this and it works, you just need to replace {id} with a map's name, such as streets-v9 but I am unable to find the IDs of the above maps.

Answer 1

Let me quote from https://www.mapbox.com/api-documentation/#maps :

If you use Mapbox.js, Mapbox GL JS, or another library like Leaflet, you're already using this API. This documentation is geared toward software developers who want to programmatically read these resources: it isn't necessary to read or understand this reference to design or use maps.

Mapbox classic map IDs

The following map IDs are accessible to all accounts using a valid access token:

mapbox.streets
mapbox.light
mapbox.dark
mapbox.satellite
mapbox.streets-satellite
mapbox.wheatpaste
mapbox.streets-basic
mapbox.comic
mapbox.outdoors
mapbox.run-bike-hike
mapbox.pencil
mapbox.pirates
mapbox.emerald
mapbox.high-contrast

So you should use something like

http://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=...

Answer 2

Ok, I would like to contribute here, because I managed to make it work: I am using jupyter notebook, and python 3.7.

First of all, the updated names of the mapbox styles are here: https://docs.mapbox.com/api/maps/#styles

Then FINALLY this code under worked perfectly well:

map_mapbox_custom = folium.Map(
    location=[60, 2], 
    zoom_start=5, 
    tiles='https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=mytoken',
    attr='mapbox')

map_mapbox_custom

Note:

• I had to write in full my mapbox token (starting with 'pk.') in place of 'mytoken', otherwise I had a blank map!

• You've got to leave {z}/{x}/{y} like that, don't try to replace them with values! it is what you specify under 'location' and 'zoom_start' which will dictate the extension and zoom of your map.

I hope this will help, but let me know in the comments if stuff is still not working for you :-)

See screenshot under...