Leaflet.js Быстрый старт Основной пример Демо

У меня возникли проблемы с тем, что основной пример работает локально. Все, что я вижу, - это серая коробка с увеличением в/из ui в верхнем левом углу и атрибуция в нижнем правом углу. Существует серый цвет, где должна быть карта по существу.Leaflet.js Быстрый старт Основной пример Демо

Мой код, кроме api-ключа, который я получил от Mapbox.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='utf-8' /> 
    <title></title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    <style type='text/css'> 
     #mapid { 
       height: 180px; 
       } 

    </style> 


</head> 
<body> 

    <div id="mapid" style="width: 600px; height: 400px; position: relative; outline:none;" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0"> 

    </div> 
<script> 
var mymap = L.map('mapid').setView([51.505, -0.09], 13); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MYMAPBOXAPIKEY', { 
    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: 'your.mapbox.project.id', 
    accessToken: 'MYMAPBOXAPIKEY' 
}).addTo(mymap); 

L.marker([40.717192,-74.012042]).addTo(map) 
    .bindPopup('The Borough of Manhattan Community College.') 
    .openPopup(); 

</script> 
</body> 
</html>

источник

2017-02-06 Akin Hwan

Я думаю, вы не создали проект с именем your.mapbox.project.id в своей учетной записи.

Попробуйте с 'mapbox.streets'

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MYMAPBOXAPIKEY', { 
    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: 'mapbox.streets' 
}).addTo(mymap);

источник

2017-02-06 22:42:32 YaFred

map = L.map('map').setView([ 0, 0 ], 2); 
tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map); 
    currentmap = tiles; 

       currentmap = L.tileLayer(
         'http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', { 
          maxZoom : 17 
     }).addTo(map);

Ihave написал проект с листовкой существует много карт на мой файл JS на линии 868 и вниз смотрите здесь: https://github.com/VisProj/vis/blob/gh-pages/WebContent/js/heat.js

источник

2017-02-06 23:19:25

Я понял это, оказалось, что у меня отсутствует URL-адрес стиля из Mapbox, так как я использовал Mapbox в качестве поставщика карт в этом примере, как пример излагает также. –

Leaflet.js Быстрый старт Основной пример Демо

ответ

Смежные вопросы