Leaflet入門|プラグインで任意の場所をリスト化して移動する(Locationlist)

leafletのプラグイン「Locationlist」を使用すると、任意の位置をリストに登録して選択・移動することができます。

実装すると以下のようになります。

リストに登録した場所を順番に移動することができます。

リストに登録した場所の一覧から任意の場所を選択・移動することができます。

Demoを表示

1.全体のコード

2.解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

2−1.ファイルの配置

Locationlistの本体は GitHubからダウンロードできます。

GitHub-Locationlist

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/leaflet.locationlist.css
css/img/icon-next.png
css/img/icon-prev.png
js/leaflet.locationlist.js

2−2.プラグインの読み込み

Step1で配置した css・jsファイルを読み込みます。

2−3.Locationlistの設定

L.control.locationlist オブジェクトを生成する際に、引数で登録する場所を設定します。

locationsList:場所を登録
showList:登録した場所をリスト表示する(true)/しない(false)

2−4.Locationlistの設定(その他のオプション)

前後(←・→)矢印で移動する際に、コールバック関数を設定することができます。

これを使用してメッセージの表示など処理を加えることができます。

これで、Locationlist を使用することができます。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする