Leaflet 中心座標とズーム値を取得

Leaflet 1系を使用して地図の中心座標（緯度・経度）とズーム倍率を表示します。

注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」

デモ

地図のズーム変更や位置を移動すると地図上部の緯度・経度・倍率の表示が変化します。input要素とspan要素の2方式で出力しています。

緯度
経度
倍率

ソースコード

コメント行のある部分がLeaflet - OpenStreetMap表示から追加された部分です。

Html部分

<!-- 緯度・経度・倍率をページ上に表示する要素 -->
<p>
緯度<input type="text" id="lat_input" /> <span id="lat_span"></span><br>
経度<input type="text" id="lng_input" /> <span id="lng_span"></span><br>
倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span><br>
</p>
 
<div id="mapid" style="width: 100%; height: 400px;"></div>

JavaScript部分

<script src="https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.js"></script>
<script>
  function cssLoad(cssFile){
    if(document.all){
      document.createStyleSheet(cssFile);
    }else{
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      link.type = "text/css"
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
  cssLoad("https://www.achiachi.net/blog/_outside/leaflet/v1/leaflet.css");
  function addOnload(evtFunc){
    if(window.addEventListener) {
      window.addEventListener('load', evtFunc, false);
    } else if(window.attachEvent){ //IE用
      window.attachEvent('onload', evtFunc);
    } else {
      //alert('window.onload エラー');
    }
  }
  var mymap;
addOnload(function(){
  mymap = L.map('mapid'); 
  L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, '
  }).addTo(mymap);
  mymap.setView([35.6896, 139.6918], 9);
 
 
  //最初の値を出力
  outputPos(mymap); 
 
  var crossIcon = L.icon({ //センタークロス表示用
    iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
    iconSize: [32, 32],
    iconAnchor: [16, 16]
  });
  var crossMarker = L.marker( mymap.getCenter(),{icon:crossIcon,zIndexOffset:1000,interactive:false} ).addTo(mymap);
 
  //マップムーブイベント
  mymap.on('move', function(e) {
    crossMarker.setLatLng(mymap.getCenter()); //センタークロス表示用
 
    //マップムーブイベントで値を出力
    outputPos(mymap);
 
  });
});
 
//現在の緯度・経度・倍率を取得して指定の要素に情報を出力する関数
function outputPos(map){
    var pos = map.getCenter();
    var zoom = map.getZoom();
    //spanに出力
    document.getElementById('lat_span').innerHTML = pos.lat;
    document.getElementById('lng_span').innerHTML = pos.lng;
    document.getElementById('zoom_span').innerHTML = zoom;
    //inputに出力
    document.getElementById('lat_input').value = pos.lat;
    document.getElementById('lng_input').value = pos.lng;
    document.getElementById('zoom_input').value = zoom;
}
 
 
</script>

説明

マップの基本部分についてはLeaflet - OpenStreetMap表示をご覧ください。

センタークロスの表示についてはLeaflet センタークロス表示をご覧ください。

html上に中心座標(緯度・経度)と倍率を表示する要素を準備します。id名をキーとして値が出力されます。input要素とspan要素の2方式に出力していますが不要な項目は後述の関数部分と一緒に削除して下さい。

<p>
緯度<input type="text" id="lat_input" /> <span id="lat_span"></span><br>
経度<input type="text" id="lng_input" /> <span id="lng_span"></span><br>
倍率<input type="text" id="zoom_input" /> <span id="zoom_span"></span><br>
</p>

地図の中心座標（緯度・経度）と倍率を取得して上記のhtmlに出力する関数。input要素とspan要素の2方式に出力していますが不要な項目は削除して下さい。

function outputPos(map){
    var pos = map.getCenter(); //緯度経度を取得
    var zoom = map.getZoom();  //ズーム値を取得
    //spanに出力
    document.getElementById('lat_span').innerHTML = pos.lat; //緯度
    document.getElementById('lng_span').innerHTML = pos.lng; //経度
    document.getElementById('zoom_span').innerHTML = zoom;   //倍率
    //inputに出力
    document.getElementById('lat_input').value = pos.lat; //緯度
    document.getElementById('lng_input').value = pos.lng; //経度
    document.getElementById('zoom_input').value = zoom;   //倍率
}

上記関数を実行するの部分は下記の2個所、で1つめは setView の直後に記述しマップが表示された最初に情報を表示します（記述しないと最初の情報が表示されません）。2つめはムーブイベント内に記述して地図が動くたびに情報を書き換えます。

//mymap.setView([35.6896, 139.6918], 9); //の後に記述
outputPos(mymap);

//mymap.on('move', function(e) {  //マップムーブイベント内に記述
  outputPos(mymap);
//});

おまけ1

表示エリアの左上や右下の座標を取得したい場合は。

var bounds = mymap.getBounds();
var posNW=bounds.getNorthWest();　//北端と西端の座標を取得
var posSE=bounds.getSouthEast();　//南端と東端なら
document.getElementById('lat1_span').innerHTML = posNW.lat; //緯度(北端)
document.getElementById('lng1_span').innerHTML = posNW.lng; //経度(西端)
document.getElementById('lat2_span').innerHTML = posSE.lat; //緯度(南端)
document.getElementById('lng2_span').innerHTML = posSE.lng; //経度(東端)
//出力用にid名「lat1_span・lng1_span・lat2_span・lng2_span」を持ったspanにタグが必要

北東の端と南西の端を取得したい場合は下記を使う。

//var pos=bounds.getNorthEast();　//北端と東端なら
//var pos=bounds.getSouthWest();　//南端と西端なら

おまけ2

緯度経度の少数以下の桁数が多すぎる場合には下記のように Math.floor などで切り下げすると良いです。下記の場合は少数4桁まで表示します。(※切り捨てのparseInt()は遅いらしい)

document.getElementById('lat_span').innerHTML = Math.floor(pos.lat*10000)/10000;
document.getElementById('lng_span').innerHTML = Math.floor(pos.lng*10000)/10000;
 
document.getElementById('lat_input').value = Math.floor(pos.lat*10000)/10000;
document.getElementById('lng_input').value = Math.floor(pos.lng*10000)/10000;

目次

Leaflet 中心座標とズーム値を取得

デモ

ソースコード

説明

おまけ1

おまけ2