leaflet入門|プラグインで拡大・縮小を行うスライダーを追加する(zoomslider)

leafletのプラグイン「zoomslider」を使用すると、スライダーで地図の拡大・縮小を行うことができます。

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

+(拡大)・ー(縮小)の間にスライダーコントローラーが表示されます。

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-zoomslider

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

index.html
css/L.Control.Zoomslider.css
js/L.Control.Zoomslider.js

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

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

Step3:zoomsliderの設定

mapオブジェクト作成時に、以下のオプションを指定します。

zoomsliderControl:ズームスライダーコントローラーの表示(true)

zoomControl:デフォルトズームコントローラーの非表示(false)

これで、zoomslider を使用できます。

スポンサーリンク

シェアする

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

フォローする