If you’re using Mapbox static or interactive maps you might still be using the old method for pulling in a style.
Recognise either of these?
L.mapbox.map('map-id', 'account.styleID')
https://api.tiles.mapbox.com/v4/mapbox.style/
Well there are newer ways to do things now, and in the near future these will stop working for you.
First step is to update the version of the javascript library you’re using (if you are) to at least v2.4.0. So any direct links to mapbox javascript files or you might have it referenced in your composer or npm package list.
Static map urls
Let’s deal with the static url paths first. There are a couple of basic changes to make:
- Remove the
.pngyou may have after the dimensions - Replace
/v4/with/styles/v1/ - Replace
/mapbox.light/with/mapbox/light-v10/static/
Reload the page or image and check that’s done what you expected. You might be using a different mapbox default style, or your own style. If it’s your own then you need to replace /mapbox/ with your own account name, and you need to replace light-v10with your own map style id.
You can find your map style id by going to the Mapbox Studio, clicking your style and copying the last part of the url from your browser. You can also click the three vertical dots, then copy the style url, and it’s the last part there.
Interactive map code
Many of you are probably referencing your style choice in the .map() method.
L.mapbox.map('map-id', 'account.styleID')
Well there is a simple change, assuming you’re on a recent enough version of the javascript API, to resolve this.
Jump the second parameter above, and add your style details in an .addLayer() call instead. For example:
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
You can replace /mapbox/streets-v11 here with your account and styleID.
So you end up with something like:
`L.mapbox.map('map-id').addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
That should get you most of the way there with the migration. But as a general rule, if you’re referencing any style choice using something.something then you’ll need to update to a something/something formatted option above.
You can also digest the full Mapbox migration article of course.