Leaflet.jsクイックスタートベーシックサンプルデモ

ローカルで基本的な例を取り上げるのに問題があります。私が見ることができるのは、左上隅にズームイン/アウトuiと右下隅にアトリビューションがあるグレーのボックスです。本質的に地図が必要な場所は灰色です。Leaflet.jsクイックスタートベーシックサンプルデモ

Mapboxから取得したapi-key以外のコードです。

<!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は、ライン868上で私のjsファイル上のマップの多くはそこにあるリーフレットでプロジェクトを書いて、ダウンここを見て試してみてください： https://github.com/VisProj/vis/blob/gh-pages/WebContent/js/heat.js

出典

2017-02-06 23:19:25

私はそれを見つけ出しました。マップハウスからStyle URLが抜けていたことが判明しました。この例ではマップ・プロバイダーとしてMapboxを使用していたので、例のようにレイアウトされています。 –

Leaflet.jsクイックスタートベーシックサンプルデモ

答えて

関連する問題