Leafletとは？

Leaflet は、Javascript で利用できる地図表示ライブラリです。以下のようなことができます。

地図の表示
マーカーを置く
ボップアップの表示
範囲を（円・多角形）を描く

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

  <div id="map" style="height: 400px;"></div>

  <script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script>
    const map = L.map('map').setView([35.681236, 139.767125], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    L.marker([35.681236, 139.767125])
      .addTo(map)
      .bindPopup('東京駅')
      .openPopup();
  </script>
</body>
</html>

Sample1

地理院タイルについて

ベースとなる地図データの種類は以下のリンクで確認できます。

地理院タイル一覧

地理院タイルを変更するには、以下の部分を変更します。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

上記の「 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' 」の部分を変更します。

淡色地図のタイルを利用したい場合は、「 https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png 」と変更します。