クイックスタートガイド - Leaflet - インタラクティブマップのためのJavaScriptライブラリ

Leaflet クイックスタートガイド

このステップバイステップガイドでは、Leafletマップの設定、マーカー、ポリライン、ポップアップの操作、およびイベント処理など、Leafletの基本をすぐに始められます。

ページの準備

マップのコードを記述する前に、ページで次の準備手順を実行する必要があります。

Leaflet CSSファイルをドキュメントのheadセクションに含める

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

Leaflet JavaScriptファイルをLeafletのCSSの後に含める

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

マップを表示したい場所に、特定のidを持つdiv要素を配置する
```
 <div id="map"></div>
```
マップコンテナに、CSSで設定するなどして、定義された高さがあることを確認する
```
#map { height: 180px; }
```

これでマップを初期化して、いろいろな操作をする準備ができました。

マップの設定

このスタンドアロンの例をご覧ください。

ロンドンの中心部のマップを、美しいOpenStreetMapタイルを使って作成しましょう。ここからは、JSで作業します。まず、マップを初期化し、表示を地理座標とズームレベルに設定します。

var map = L.map('map').setView([51.505, -0.09], 13);

デフォルトでは（マップインスタンスを作成するときにオプションを渡さなかったため）、マップ上のすべてのマウスとタッチ操作が有効になり、ズームコントロールと属性コントロールがあります。

setView呼び出しもマップオブジェクトを返すことに注意してください。ほとんどのLeafletメソッドは、明示的な値を返さない場合はこのように動作します。これにより、便利なjQueryのようなメソッドチェーンが可能になります。

次に、マップに追加するタイルレイヤーを追加します。ここでは、OpenStreetMapタイルレイヤーを使用します。タイルレイヤーの作成には通常、タイル画像のURLテンプレート、属性テキスト、レイヤーの最大ズームレベルを設定することが含まれます。OpenStreetMapタイルはLeafletマップをプログラミングするのに適していますが、本番環境でタイルを使用する場合は、OpenStreetMapのタイル使用ポリシーをお読みください。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

div要素とleaflet.jsのインクルードの後で、すべてのコードが呼び出されることを確認してください。これで完了です！これでLeafletマップが機能します。

Leafletはプロバイダーに依存しないことに注意することが重要です。つまり、特定のタイルプロバイダーの選択を強制しません。また、Leafletにはプロバイダー固有のコードが1行も含まれていないため、必要に応じて他のプロバイダーを自由に使用できます。

OpenStreetMapに基づくものを使用する場合は、著作権表示に従って、属性を記述する必要があります。他のほとんどのタイルプロバイダー（Mapbox、Stamen、Thunderforestなど）も属性を要求します。必ず、適切な場所でクレジットを表示してください。

マーカー、円、ポリゴン

このスタンドアロンの例をご覧ください。

タイルレイヤーに加えて、マーカー、ポリライン、ポリゴン、円、ポップアップなど、他のものをマップに簡単に追加できます。マーカーを追加してみましょう。

var marker = L.marker([51.5, -0.09]).addTo(map);

円の追加も同じです（半径をメートル単位で2番目の引数として指定することを除いて）。ただし、オブジェクトを作成するときに最後の引数としてオプションを渡すことで、表示方法を制御できます。

var circle = L.circle([51.508, -0.11], {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	radius: 500
}).addTo(map);

ポリゴンの追加も簡単です

var polygon = L.polygon([
	[51.509, -0.08],
	[51.503, -0.06],
	[51.51, -0.047]
]).addTo(map);

ポップアップの操作

このスタンドアロンの例をご覧ください。

ポップアップは通常、マップ上の特定のオブジェクトに情報を添付したい場合に使用されます。Leafletには、これを行うための非常に便利なショートカットがあります。

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

オブジェクトをクリックしてみてください。bindPopupメソッドは、指定されたHTMLコンテンツを含むポップアップをマーカーに添付して、オブジェクトをクリックするとポップアップが表示され、openPopupメソッド（マーカーのみ）は、添付されたポップアップをすぐに開きます。

ポップアップをレイヤーとして使用することもできます（オブジェクトにポップアップを添付する以上のものが必要な場合）。

var popup = L.popup()
	.setLatLng([51.513, -0.09])
	.setContent("I am a standalone popup.")
	.openOn(map);

ここでは、addToの代わりにopenOnを使用します。これは、新しいポップアップを開くときに、以前に開いたポップアップを自動的に閉じることを処理するため、ユーザビリティが向上します。

イベントの処理

Leafletで何かイベント（ユーザーがマーカーをクリックしたり、マップのズームが変更されたりするなど）が発生するたびに、対応するオブジェクトは、関数でサブスクライブできるイベントを送信します。これにより、ユーザーの操作に対応できます。

function onMapClick(e) {
	alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

各オブジェクトには独自のイベントセットがあります。詳細については、ドキュメントを参照してください。リスナー関数の最初の引数はイベントオブジェクトです。これには、発生したイベントに関する役立つ情報が含まれています。たとえば、マップクリックイベントオブジェクト（上記の例のe）には、クリックが発生した場所であるlatlngプロパティがあります。

アラートの代わりにポップアップを使用して、例を改善してみましょう。

var popup = L.popup();

function onMapClick(e) {
	popup
		.setLatLng(e.latlng)
		.setContent("You clicked the map at " + e.latlng.toString())
		.openOn(map);
}

map.on('click', onMapClick);

マップをクリックすると、ポップアップに座標が表示されます。完全な例を表示→

これでLeafletの基本を学び、すぐにマップアプリの作成を開始できます！詳細なドキュメントまたは他の例も確認してください。