CODEWITHSUNDEEP
javascripthtmlleafletmapboxclient-side-scripting
qqq
qqq

Reputation: 936

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

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

Blank map tiles with MapBox

The map does not show at all, my map tile is blank. The errors that I get in the dev tools console is:

Error messages in console

GET https://api.tiles.mapbox.com/v4/mapbox.streets/9/123/183.png?access_token=pk.eyJ1IjoibXl2ZXJkaWN0IiwiYSI6ImNrZmoyYmpuNDB1eHYycG16bms0aHN2ZWwifQ.w0DRp5yDUHxa2RJa0aDRlQ 410 (Gone)
Image (async)       
createTile  @   TileLayer.js:158
_addTile    @   GridLayer.js:812
_update     @   GridLayer.js:709
_setView    @   GridLayer.js:570
_resetView  @   GridLayer.js:526
 onAdd      @   GridLayer.js:162
_layerAdd   @   Layer.js:114
whenReady   @   Map.js:1465
addLayer    @   Layer.js:176
addTo       @   Layer.js:52
(anonymous) @   maps.js:16

The maps.js:16 above references the last line .addTo(map) in the maps.js code snippet below:

let coordinates = [44.96, -93.2];
let zoomLevel = 9;
let map = L.map("college-map").setView(coordinates, zoomLevel);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets',
  accessToken: 'your-access-token'
}).addTo(map);

How do I fix this error and display the map successfully?

Upvotes: 18

Views: 9301

Answers (3)

Falke Design
Falke Design

Reputation: 11348

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

Upvotes: 45

francordie
francordie

Reputation: 618

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

Upvotes: 5

Anatolii Suhanov
Anatolii Suhanov

Reputation: 2702

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

Upvotes: 13

Related Questions