web-dev-qa-db-fra.com

Caractéristiques de cartes vierges - Erreur 410 Gone (MapBox & Leaflet JS)

J'utilise une notice JS et mapbox pour créer une carte. Mon navigateur s'affiche comme ci-dessous:

Blank map tiles with MapBox

La carte ne montre pas du tout du tout, ma carrelage de carte est vide. Les erreurs que je reçoivent dans la console Dev Tools sont:

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

Les cartes.js: 16 ci-dessus références La dernière ligne .Addto (carte) dans l'extrait de code MAPS.JS ci-dessous:

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)

Comment corriger cette erreur et afficher la carte avec succès?

javascripthtmlleafletmapboxclient-side-scripting
8
Sam Vitare

Mapbox mapbox.streets Les tuiles ont été obsolètes pour les nouveaux styles statiques API.

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

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

Remplacez également mapbox.streets Pour mapbox/streets-v11 Dans le paramètre ID de L.tileLayer() objet.

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

3
francordie