leaflet入門|プラグインでズームレベルを表示する(zoominfo)

leafletのプラグイン「zoominfo」を使用すると、ズームレベルを地図上に表示することができます。

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

+(拡大)・ー(縮小)の間にズームレベルが表示されます。

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-zoominfo

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

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

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

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

Step3:zoominfoの設定

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

zoominfoControl:ズームレベル表示コントローラーの表示(true)

zoomControl:デフォルトズームコントローラーの非表示(false)

これで、zoominfo を使用してズームレベルを表示できます。

スポンサーリンク

シェアする

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

フォローする