Leaflet入門|プラグインでホームボタンを追加する(defaultextent)

leafletのプラグイン「defaultextent」を使用すると、地図にホームボタンを追加することができます。

ホームボタンは、地図を初期状態に戻すボタンです。

また、オプションで「座標」「ズームレベル」「ツールチップ」を変更することもできます。

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

 このボタンがホームボタンです。

Demo1を表示(初期表示)

Demo2を表示(座標、ズームレベルを変更)

1.全体のコード(Demo1)

2.解説

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

2−1.ファイルの配置

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

GitHub-defaultextent

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

index.html
css/leaflet.defaultextent.css
Css/leaflet.defaultextent.png
Css/leaflet.defaultextent@2X.png
js/leaflet.defaultextent.js

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

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

2−3.defaultextentの設定(Demo1)

L.mapオブジェクトを作成する際に、オプション(defaultExtentControl: true)を指定します。

2−4.defaultextentの設定(Demo2)

L.mapオブジェクト作成時ではなく、L.control.defaultExtent オブジェクトを生成し、mapに追加します。

オプション

title:ツールチップに表示する文言を指定します。
setZoom:ズームレベルを指定します。
setCenter:中心座標を指定します。

ズームレベルと中心座標の初期値は、L.map オブジェクト作成時の値が使用されます。

これで、Leaflet.defaultextent を使用できます。

スポンサーリンク

シェアする

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

フォローする