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

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

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

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

Demoはこちらです。

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-zoominfo

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

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

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

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

2−3.zoominfoの設定

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

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

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

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

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

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

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

スポンサーリンク

シェアする

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

フォローする