Leaflet入門|マップに緯度経度を表示する(Coordinates Control)

Leafletのプラグイン「Leaflet Coordinates Control」を使って、マップにクリックした地点の緯度経度を表示します。

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

マップの左下に選択した地点の緯度経度が表示されます。

Demoを表示

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-Leaflet Coordinates Control

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

index.html
css/Control.Coordinates.css
js/Control.Coordinates.js

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

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

2−3.Coordinates Controlの設定

L.Control.Coordinatesオブジェクトを生成して、L.mapオブジェクトに追加します。
また、L.Control.Coordinatesオブジェクトにはオプションも設定することができます。

オプション
latitudeText:表示する緯度のラベル名(デフォルトは、「lat」)
longitudeText:表示する経度のラベル名(デフォルトは、「lon」)
precision:緯度経度の精度(小数点以下の桁数)

その他のオプションもありますが、GitHubではなく、ソースコード「Control.Coordinates.js」にコメントとして記載されているので興味のある方はそちらをご参照ください。

これでマップに選択した場所の緯度経度を表示することができます。

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

その他の緯度経度を表示するおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(緯度経度の表示)

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

スポンサーリンク

シェアする

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

フォローする