Leaflet の使い方 - Javascript

  • 作成日：
  • 最終更新日：2026/01/06

Leaflet のライブラリの読み込み

Leaflet の CSS と JavaScript ファイルを読み込みます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

地図を表示する

マップを表示させるエリアを div タグで定義します。

<div id="mapArea"></div>

マップの表示領域を設定します。setView()を使って(緯度, 経度, ズームレベル)の順に設定します。

const map = L.map('mapArea');
// ([緯度, 経度], ズームレベル)
map.setView([35.68953, 139.69170], 12);

マップタイルを指定します。

attributionは、データの出典（著作権表示）を設定するための項目です。地図の右下に小さく表示される「 OpenStreetMap 」というテキストがこれにあたります。

const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const attr = "<a href='http://osm.org/copyright'>OpenStreetMap</a>"

L.tileLayer(tileUrl, 
  { attribution: attr }
).addTo(map);

マーカーを追加する

マップ上にマーカーを表示するには以下のようにします。

// L.marker([緯度,経度]).addTo(map);
L.marker([35.68953, 139.69170]).addTo(map);

マーカーをまとめて追加する

マーカーをまとめて追加するには以下のようにします。

const marker1 = L.marker([35.681, 139.767]).bindPopup("東京駅");
const marker2 = L.marker([35.658, 139.701]).bindPopup("渋谷駅");
const stations = L.layerGroup([marker1, marker2]);
stations.addTo(map);

設定したマーカーをまとめて削除するには以下のようにします。

map.removeLayer(stations);

スケールバーを追加する

スケールバーを表示するには、以下のようにします。

L.control.scale().addTo(map);

上記の設定では、マイル/フィートも表示されます。メートルのみの表示にするには、以下のようにします。

L.control.scale({ imperial: false, metric: true }).addTo(map);

スケールの表示を変更するには以下のようにします。

L.control.scale({ imperial: false, metric: true, position: 'topright' }).addTo(map);

position の設定値は、以下の設定値があります。

  • topright
  • topleft
  • bottomleft
  • bottomright