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

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

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

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

Demoを表示

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-zoom-min

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

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

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

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

2−3.Mapの基本設定

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

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

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

2−4.zoom-minの設定

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

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

3.その他のおすすめプラグイン

その他のズーム系おすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(ズーム系)

すべてのおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン 

スポンサーリンク

シェアする

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

フォローする