Leaflet
Leaflet は Web地図サービスで広く使われるオープンソースのJavaScriptライブラリです。モバイルでも使えるインタラクティブな地図をWebページ上に簡単に表示できます。
サンプルコード
シンプルな地図表示の例
サンプルコード2
スマートフォンで現在位置を表示する例
Leaflet を利用するには
CDNから CSS と JS を読み込むだけで利用できます。
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" > <script src ="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
スクリプトの概説
- HTML上の地図を配置する div要素の id を設定
var map = L.map('map');
- 地図の中心の緯度・経度とズームレベルを指定
map.setView( [35, 136] , 5);
- タイルレイヤーの指定(OpenStreetMap を利用)
L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
- マーカーを指定(九州産業大学の座標を指定)
L.marker([ 33.66983627668292, 130.44487416744232 ] ).addTo(map).bindPopup('Kyushu Sangyo University') .openPopup();
参考|緯度・経度情報の取得
- GoogleMap を使う
地図上で目的の場所をダブルクリックすると、マーカーが表示されるとともに住所と緯度・経度が表示されます。
- GeoJSON.io を使う
https://geojson.io/
地図上でマーカーツールを選択して目的の場所をクリックすると右サイドに GeoJSON形式のデータが表示されます。"coordinates" として表示される最初の数字が経度、次の数字が緯度になっています。