Leaflet | 地図にマーカーや円、線を引く | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

Leafletについての解説

Leafletについての解説

Leafletは、オープンソースのJavaScriptライブラリで、インタラクティブな地図を簡単にウェブ上に表示するために使用されます。Google Maps APIと比べて軽量で、カスタマイズ性に優れており、独自の地図を作成する際に非常に便利です。

Leafletの実装方法

Leafletを使用するためには、まず以下のコードを<head>内に記述して、ライブラリを読み込みます。

<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>

Leafletの特徴

特徴	説明
軽量	LeafletはGoogle Maps APIなどに比べて非常に軽量で、パフォーマンスが良い。
オープンソース	無料で利用可能なオープンソースライブラリで、誰でもカスタマイズ可能。
モバイル対応	スマートフォンやタブレットにも最適化されたタッチ操作が可能な地図表示ができる。
プラグインの豊富さ	Leafletの機能を拡張する多くのプラグインが利用可能。

プロパティとその値の一覧表

プロパティ名	説明	値の例
L.map()	地図を作成する際に使用します。	L.map(‘map’)
L.tileLayer()	地図のタイルを設定するために使用します。	L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’)
L.marker()	地図上にマーカーを表示するために使用します。	L.marker([35.6895, 139.6917])
L.popup()	マーカーなどにポップアップメッセージを表示するために使用します。	L.popup().setContent(“メッセージ”)

地図を表示する例

実行例

HTMLとJavaScriptコード


// 地図を表示するHTML要素
<div id="map1"></div>

// Leafletを使って地図を表示するスクリプト
<script>
var map1 = L.map('map1').setView([35.6895, 139.6917], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map1);
</script>

解説

この例では、Leafletを使って東京都庁を中心にした地図を表示しています。OpenStreetMapのタイルを使って地図を描画しています。

マーカーを表示する例

実行例

HTMLとJavaScriptコード


// 地図を表示するHTML要素
<div id="map2"></div>

// Leafletを使って地図とマーカーを表示するスクリプト
<script>
var map2 = L.map('map2').setView([35.6895, 139.6917], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map2);

// マーカーを地図に追加
var marker = L.marker([35.6895, 139.6917]).addTo(map2);
marker.bindPopup("東京都庁です。").openPopup();
</script>

解説

この例では、地図上に東京都庁を示すマーカーを追加し、ポップアップを表示しています。

円を表示する例

実行例

HTMLとJavaScriptコード


// 地図を表示するHTML要素
<div id="map3"></div>

// Leafletを使って地図と円を表示するスクリプト
<script>
var map3 = L.map('map3').setView([35.6895, 139.6917], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map3);

// 地図上に円を追加
var circle = L.circle([35.6895, 139.6917], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map3);
circle.bindPopup("この円は東京都庁を中心に半径500メートルです。").openPopup();
</script>

解説

この例では、地図上に東京都庁を中心とした半径500メートルの円を描画し、ポップアップを表示しています。

ポリゴンを表示する例

実行例

HTMLとJavaScriptコード


// 地図を表示するHTML要素
<div id="map4"></div>

// Leafletを使って地図とポリゴンを表示するスクリプト
<script>
var map4 = L.map('map4').setView([35.6895, 139.6917], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map4);

// ポリゴンを地図に追加
var polygon = L.polygon([
    [35.6935, 139.6927],  // 東京都庁の北
    [35.6865, 139.6927],  // 東京都庁の南
    [35.6895, 139.6857]   // 東京都庁の西
]).addTo(map4);
polygon.bindPopup("東京都庁付近のポリゴンです。").openPopup();
</script>