leaflet入門|プラグインで縮小ボタンを追加する(zoom-min)

leafletのプラグイン「zoom-min」を使用すると、ワンクリックで地図を最小ズームレベルで表示することができます。

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

このボタンをクリックすると、最小ズームレベルにすることができます。

Demoを表示

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-zoom-min

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

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

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

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

Step3:Mapの基本設定

L.mapオブジェクト作成時に、オプション zoomControl を falseに設定してデフォルトの拡大・縮小コントローラーを非表示にします。

その他のオプションは、こちらになります。

center:地図の中心座標
zoom:初期表示のズームレベル
minZoom:ズームレベルの最小値(のボタンを押すとこのレベルで表示)
maxZoon:ズームレベルの最大値

Step4:zoom-minの設定

L.map オブジェクトに、L.Control.ZoomMin オブジェクトを追加します。

これで、zoom-min コントローラーを使用できます。

スポンサーリンク

シェアする

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

フォローする