../../_images/logo_leaflet.png

Leaflet クイックスタート

Leaflet はブラウザベースで、モバイルフレンドリーなインタラクティブ地図のための JavaScript ライブラリです。軽量ですが、ほとんどの開発者がオンライン地図に必要とするすべての機能を備えています。Leaflet はシンプル、パフォーマンス、ユーザビリティを念頭に設計されています。

実行する

このクイックスタートを開始する前に、MapProxyを開始します。OSGeoLiveでは Geospatial\Web Services\MapProxy\Start MapProxy にあります。これで、このデモで必要な背景タイルを提供できるようになります。

example を見る

ちなみに

OSGeoLiveの外部でこのクイックスタートを読んでいる場合は、https://leafletjs.com/examples/quick-start/ で元のデモを読むことをお勧めします。このデモはOSGeoLiveでtilestacheを使用しているためです。

HTMLページを用意する

地図のコードをかきはじめる前に、ページで、次の準備ステップを実施する必要があります:

  • ドキュメントのヘッダーセクションで、Leaflet CSSファイルをよみこむ

<link rel="stylesheet" href="/leaflet/leaflet.css" />

  • Leaflet JavaScritファイルをよみこむ:

<script src="/leaflet/leaflet.js"></script>

  • 地図を表示したい場所に適切な id をもつ div エレメントを配置する:

<div id="map"></div>

  • 地図コンテナには、高さが定義されていること。CSSの例は次のとおり:

#map { height: 180px; }

これで地図を表示し、応用する準備がととのいました。

地図を設定する

では、2022年のFOSS4Gカンファレンスが開催されたイタリア・フィレンツェの地図を作成してみましょう。最初に地図の初期化をおこないます。ビューを設定し投影法とズームレベルを選択します:

var map = L.map('map').setView([43.77913, 11.24938], 15);

デフォルトで (地図インスタンスを作成するときに、設定オプションを与えない場合)、全てのマウス操作とタッチ操作は有効化されます。ズームと属性コントロールがあります。

setView のよびだしも、地図オブジェクトを返却します。 - 多くのLeafletのメソッドは、明示的な戻り値がない場合、同様に動作します。 jQueryのようなメソッドのチェイニングができて便利です。

次に、地図にレイヤを追加します。この例では、LiveDVDでMapProxyから提供されたタイルイメージを使用します。OpenStreetMap などの、より良い背景地図を使用すると、ユーザ体験を向上させられることに注意してください。

タイルレイヤ を作成するには、通常、タイルイメージのURLテンプレート、属性テキスト、およびレイヤの最大ズームレベルを設定します。

L.tileLayer('http://localhost:8011/wmts/mapnik_tile/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png',{}).addTo(map);

オンラインアクセスがある場合は、バックグラウンドとしてより良いタイルマップサービスを使用することができます。

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

すべてのコードが div タグと leaflet.js の読み込みの後に呼び出されていることを確認してください。これが全てです。これで、Leaflet の地図を動かすことができました。

Leaflet はプロバイダに依存しないので、タイルに対して特定のプロバイダの選択を強制することはなく、プロバイダ固有のコード行も含まれていないので、必要に応じて他のプロバイダを使用することもできます。

マーカー、円、ポリゴン

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

var marker = L.marker([43.77913, 11.24938]).addTo(map);

円の追加もだいたい同じです。ただし、2番目の引数として半径をメートル単位で指定する点が違います。 さらに、オブジェクトの作成時に最後の引数としてオプションを渡すことで、円の外観を制御できます。

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

ポリゴンの追加は簡単です：

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

ポップアップの操作

ポップアップは通常、マップ上の特定のオブジェクトに情報をアタッチする場合に使用します。リーフレットには非常に便利なショートカットがあります：

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

ここでは、 addTo の代わりに openOn を使用しています。これは、新しいポップアップを開いたときに、以前に開いたポップアップを閉じる処理を自動化します。使いやすさを優先しています。

イベントへの対応

ユーザがマーカーをクリックしたり、地図のズームを変更したりするなど、何か Leaflet に起こるたびに、対応するオブジェクトがイベントを送信し、ユーザはそのイベントを関数でsubscribe (受信) することができます。この仕組みで、ユーザの操作に反応できます。

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

map.on('click', onMapClick);

各オブジェクトには独自のイベント・セットがあります。詳細は documentation を参照してください。リスナー関数の最初の引数はイベントオブジェクトです。イベントオブジェクトには、発生したイベントに関する有用な情報が含まれています。たとえば、マップクリックイベントオブジェクト(上の例の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);

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

What next?

これで、Leaflet の基礎を学び、地図アプリをすぐに作ることができます! 詳細な documentation やその他の examples をぜひ見てください。