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

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

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

※ 地図の左下にズームレベル「15」が表示されています。

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-ZoomLabel

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

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

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

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

Step3:ZoomLabelの設定

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

これで、ズームレベルを地図上に表示できます。

Step4:ZoomLabelのオプション

オプション(position)でラベルの表示位置を指定できます。

・topright,

・topleft

・bottomright

・bottomleft(defalut)

指定する場合は、次のように引数に position を指定します。

スポンサーリンク

シェアする

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

フォローする