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

Leafletのプラグイン「Leaflet.Coordinates」を使って、マップにマウスポインター地点の緯度経度を表示します。

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

左下に  のように、経度・緯度が表示されます。

1.全体のコード

2.解説

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

2−1.ファイルの配置

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

GitHub-Leaflet.Coordinates

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

index.html
css/Leaflet.Coordinates-0.1.5.css
js/Leaflet.Coordinates-0.1.5.min.js

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

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

2−3.Coordinatesの設定

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

<オプション>
position:表示位置
decimals:精度(小数点以下)
labelTemplateLat:緯度の表示ラベル名称
labelTemplateLng:経度の表示ラベル名称
※その他のオプションは、GitHubを参照してください。

これでマップに緯度経度が表示できます。

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

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

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

スポンサーリンク

シェアする

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

フォローする