Leafletとは
LeafletとはオープンソースのJavaScriptライブラリで、
地図を描画することができる
公式リファレンス
https://leafletjs.com/index.html
地図を描画する
- HTMLのheadタグ内でLeafletのcssとjsを読み込む
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
- HTMLのbodyタグ内に地図を描画するタグを追加
<body>
<div id='mapcontainer'></div>
</body>
- JavaScriptで地図を描画する
// 画面読み込み時実行
window.onload = () => {
// Leafletの地図オブジェクト作成
// 地図を表示するdiv要素のidを設定
const map = L.map('mapcontainer');
// 地図の中心緯度経度とズームレベルを指定
map.setView([35.40, 136], 5);
// タイルレイヤ(国土地理院地図)の設定
const mapApi = "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png";
const tilelayer = L.tileLayer(mapApi, {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
})
// タイルレイヤを地図に追加
tilelayer.addTo(map);
}