leaflet入門|プラグインで地図を上下左右に動かすコントローラーを追加(Pancontrol)

leafletのプラグイン「Pancontrol」使用して、地図を上下左右に動かすコントローラーを追加することができます。

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

+ーのズームコントローラーの下にあるコントローラーが、今回追加するものです。

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-Pancontrol

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

index.html
css/L.Control.Pan.css
css/images/pan-up.png
css/images/pan-right.png
css/images/pan-left.png
css/images/pan-down.png
js/L.Control.Pan.js

Step2:プラグインの読み込み

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

Step3:Pancontrol の設定

L.control.pan オブジェクト を mapに追加するだけで設定完了です。

これで、Pancontrol を使うことができます。

スポンサーリンク

シェアする

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

フォローする