Mapbox tiles and Leafletjs

22
votes

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.

3
leafletmapbox

3 Answers

49
votes

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
17
votes

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
3
votes

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.