Как отобразить слой плитки Mapbox

Question

Я пытаюсь использовать этот простой пример из LeafletJS, но не могу получить отображение слоя с помощью открытого ключа Mapbox. На карте отображается серый фон с моим маркером и всплывает.

var map = L.map('map').setView([39.5, -105.5], 7); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
maxZoom: 18, 
id: 'test.project', 
accessToken: 'copied.and.pasted.my.mapbox.key.here' 
}).addTo(mymap); 

L.marker([39.5, -105.5]).addTo(map) 
.bindPopup('This is my first marker!') 
.openPopup(); 

Answer 1

Вы звоните .addTo(mymap); на tilelayer, но ваш объект карта map. Используйте это: .addTo(map);

Возможно, вам также придется немного изменить URL. После documentation here я создал карту, основанную на стиле:

var map = L.map('map').setView([39.5, -105.5], 7); 

L.tileLayer('https://api.tiles.mapbox.com/styles/v1/{username}/{id}/tiles/{tileSize}/{z}/{x}/{y}?access_token={accessToken}', { 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    maxZoom: 18, 
    username: 'mapbox username', 
    id: 'mapbox style id', 
    accessToken: 'mapbox access token', 
    tileSize: 512, 
    zoomOffset: -1 
}).addTo(map); 

L.marker([39.5, -105.5]).addTo(map) 
    .bindPopup('This is my first marker!') 
    .openPopup(); 

Если вы хотите, чтобы получить плитку для определенного Tileset используют это (documentation):

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

tilesetId имеет вид username.id, это не имя вашего проекта, вы можете найти его в редакторе/Studio.