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

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

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

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

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

Demoはこちらです。

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

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-LimitZoom

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

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

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

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

Step3:LimitZoomの設定

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

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

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

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

スポンサーリンク

シェアする

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

フォローする