Leaflet入門|プラグインでズームレベルを制限する(LimitZoom)

Leafletのプラグイン「LimitZoom」を使用すると、拡大・縮小するズームレベルを制限することができます。

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

画面下部に表示している「ズームレベル」は、デバッッグ用に表示しています。

実装する際は非表示にすることができます。

Demoはこちらです。

※Demoでは、ズームレベルを1、10、15に制限しています。

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-LimitZoom

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

index.html
js/Leaflet.LimitZoom.js
js/Leaflet.ContinuousZoom.js

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

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

2−3.LimitZoomの設定

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

zooms:ズームレベルを指定します。

以下では、[1,10,15]と指定しているので、ズームレベルが3段階で切り替わります。

これで、LimitZoom を使用してズームレベルを指定できました。

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

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

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

スポンサーリンク

シェアする

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

フォローする