leaflet入門|プラグインで矩形選択した箇所を拡大する(BoxZoom)

leafletのプラグイン「BoxZoom」を使用すると、地図上の矩形選択をした箇所を拡大することができます。

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

 虫眼鏡 アイコンをクリックすると、矩形選択することができます。

矩形選択をした箇所が拡大されます。

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

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

GitHub-BoxZoom

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

index.html
css/leaflet-control-boxzoom.css
css/leaflet-control-boxzoom.svg
js/leaflet-control-boxzoom.js

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

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

Step3:BoxZoom の設定

L.Control.boxzoom オブジェクト を mapに追加するだけで設定完了です。

positionは、虫眼鏡アイコンを地図のどの位置に表示するかを指定します。

これだけで、BoxZoom を使うことができます。

その他のオプションは  GitHub-BoxZoom を参照してください。

スポンサーリンク

シェアする

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

フォローする