Blank map tiles - Error 410 gone (Mapbox & Leaflet JS)

Question

I am using Leaflet JS and MapBox to create a map. My browser displays as below:

The map does not show at all, my map tile is blank. The errors that I get in t

Answer 1

Mapbox mapbox.streets tiles was deprecated for new static styles api.

Old url: https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=

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

Also replace mapbox.streets for mapbox/streets-v11 in id parameter of L.tileLayer() object.

Official docs: https://docs.mapbox.com/api/maps/#static-tiles

Answer 2

Mapbox changed the url schema from:

var map = L.map('map');

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?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>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(map);

To:

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);

The url https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken} and the {id: 'mapbox/streets-v11'} changed.

Doc: Mapbox Leaflet Implementaton (On the right side is a switch with before and after(now)).

Url params: Static Tiles Style

Default Styles

The new default style Ids:

• mapbox/streets-v11
• mapbox/outdoors-v11
• mapbox/light-v10
• mapbox/dark-v10
• mapbox/satellite-v9
• mapbox/satellite-streets-v11

Answer 3

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/410

"410 Gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent."

If you open your link https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ in the browser, you will get this:

{"message":"Classic styles are no longer supported; see https://blog.mapbox.com/deprecating-studio-classic-styles-d8892ac38cb4 for more information"}

See also this:

https://docs.mapbox.com/help/troubleshooting/migrate-legacy-static-tiles-api/#will-the-apis-return-an-error-when-classic-styles-are-no-longer-supported