leaflet入門|プラグインでスライダーを表示する(slider)

leafletのプラグイン「Leaflet.Slider」を使って、地図上にスライダーを表示します。
このスライダーには、自由に処理を設定することができます。
今回は、スライダーの動きに合わせて地図のズームレベルを変更します。

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

 このボタンをクリックすると、スライダーが表示されます。

Demoを表示

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-Leaflet.Slider

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

index.html
css/leaflet-slider.css
js/leaflet-slider.js

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

Step1で配置した css・jsファイルを読み込みます。
また、今回はスライダーのアイコンに「Font Awesome」を使用するため、Font Awesome も読み込みます。

Step3:Leaflet.Sliderの設定

L.control.sliderオブジェクトを生成して、L.mapオブジェクトに追加します。

<L.control.sliderの引数>
第一引数:スライダーの値が変化した際の処理を定義します。
第二引数:スライダーのオプションを指定します。

オプション
max:スライダーの最大値を指定。
min:スライダーの最小値を指定。
value:スライダーの初期値を指定。
step:スライダーの増減値を指定。
orientation:スライダーの表示方向(水平・垂直)を指定。
id:スライダーの名前。
logo:スライダーボタンのアイコンを指定。文字でもOK。
※その他のオプションは、GitHubを参照してください。

これで、スライダーを表示できます。

スポンサーリンク

シェアする

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

フォローする