Troubleshooting

Migrating to the modern Static Tiles API

If you are using a custom classic style that you created in Studio Classic and want to migrate to the modern Static Tiles API, you will need to create a new custom style with Mapbox Studio. You can then update your Leaflet or Mapbox.js implementation with your new style ID following the guidance on this page.

Leaflet implementations

If you are using Leaflet with a Studio Classic template style (for example, mapbox.streets), use the modern equivalent template style with the Mapbox Static Tiles API when initializing the tileLayer. This only requires changing a few lines of code.

var map = L.map('map');
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: 'mapbox/streets-v11',
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(map);
Warning

By default the modern Static Tiles API returns a 512x512 map tile, instead of the 256x256 that classic styles returned. If you do not include the tileSize: 512 and zoomOffset: -1 options, your map will load but labels, icons, and other features may appear much smaller than expected.

Mapbox.js implementations

Because Mapbox.js is a plugin for Leaflet, the migration pattern is similar. Rather than passing the string id of Mapbox template style (for example, 'mapbox.streets'), you will initialize a styleLayer and add this layer to your map.

L.mapbox.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = L.mapbox.map('map')
.setView([40, -74.50], 9)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
Was this page helpful?