マップボックスのタイルレイヤーを表示する方法

Question

この単純な例をLeafletJSで使用しようとしていますが、マップボックスの公開キーを使用してレイヤーを表示できません。マップはサンプルマーカーと灰色の背景を表示し、ポップアップします。

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

あなたはtilelayerに.addTo(mymap);を呼び出しているが、あなたのマップオブジェクトがmapです。これを使用してください：.addTo(map);

また、URLを少し変更する必要があります。あなたが特定のタイルセット使用この（documentation）用のタイルを取得したい場合は

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

：

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形態を有しdocumentation here以下の私は、スタイルに基づいてマップを作成しましたusername.idの名前はプロジェクトの名前ではなく、エディタ/ Studioで見つけることができます。