22

I'm trying to load some additional tile layers on my map but I can't quite figure it out. The ones that I currently have I only have thanks to someone that provided a tutorial but didn't say what the other tile options were. Can someone help me with this?

var mapboxUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}';
var accessToken = 'mySuperSecretToken';

var grayscale = L.tileLayer(mapboxUrl, {id: 'mapbox.light', attribution: '', maxZoom: 20, accessToken: accessToken}),
streets = L.tileLayer(mapboxUrl, {id: 'mapbox.streets', attribution: '', maxZoom: 20, accessToken: accessToken});

I cannot seem to figure out how to get any additional layers or even use the new streets version that I got an email about today.

twg_
  • 995
  • 2
  • 7
  • 15

3 Answers3

52

I actually finally found the answer.

The URL string needed to be updated to

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

The available styles ({id}) are

  • streets-v9
  • satellite-streets-v9
  • light-v9
  • dark-v9
  • outdoors-v9
twg_
  • 995
  • 2
  • 7
  • 15
17

Full list of Mapbox classic map IDs, ie for Leaflet, are at https://www.mapbox.com/api-documentation/#maps.

At the time of writing the IDs are:

  • 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
Victor Häggqvist
  • 4,484
  • 3
  • 27
  • 35
  • is there a way to make the id dynamic, for example switching between mapbox.satellite and mapbox,streets when clicking a button or something ? – James Jun 03 '19 at 15:31
  • I can't seem to find the IDs anymore on the mapbox docs, not even at the link @VictorHäggqvist provided. Is it just me or did they actually hide them somewhere? – Stefano Mar 17 '20 at 22:15
3

Actually, the new tile layers 'styles' that Mapbox was referring to were vector tile layers.

Mapbox-GL JS uses vector styles which you listed (xxx-v9). (up to date as of 05/2019)

Mapbox JS is built on top of Leaflet (L.tilelayer()) and uses raster tilesets, which are images. Here are the available basemaps from Mapbox.

CCantey
  • 306
  • 1
  • 14
  • 1
    I can not find the MapBox JS build basemaps on that link. Did they change the link? – Philipp S. Apr 05 '19 at 11:16
  • 1
    The links have changed, mapbox no longer maintains this api and it seems they have gone out of their way to hide this information. The answer above from Victor has a pretty good, probably comprehensive list of available basemaps. – CCantey May 02 '19 at 20:37