Leafletで4隅の緯度経度を取得

https://leafletjs.com/download.html からソースコードをダウンロードし、解凍後、publicディレクトリ以下に配置。またマップデータもpublicディレクトリ以下に配置。

HTML上で

link(rel='stylesheet', href='leaflet/leaflet.css')
script(src='leaflet/leaflet.js')

を指定してあげれば、使用可能。(相対パスで指定しないとテスト環境で動作しないので注意)

以下のサイトを参照した。

基本の使い方https://qiita.com/mitch0807/items/7ed4eaf6253a9b879ae7

タイルレイヤ―の説明https://business.mapfan.com/blog/detail/1571

使用例https://ktgis.net/service/leafletlearn/index.html#step1

公式ドキュメントhttps://leafletjs.com/reference-1.6.0.html#map-example

var map = L.map('div要素のID', optionのオブジェクト);

例

var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

getbound()メソッド で取得可能。

var bounds = mymap.getBounds();
var north = bounds._northEast.lat;
var south = bounds._southWest.lat;
var east = bounds._northEast.lng;
var west = bounds._southWest.lng;

moveイベントをonメソッドで取得すればよい。

mymap.on("move", e => {
    イベント発生時に実行したい関数
});

こちらを参照https://leafletjs.com/reference-1.6.0.html#map-example

mymap.on("move", e => {
        // console.log("moved");
        var bounds = mymap.getBounds();
        var north = bounds._northEast.lat;
        var south = bounds._southWest.lat;
        var east = bounds._northEast.lng;
        var west = bounds._southWest.lng;

        markerList.forEach(marker => {
            if (south<marker.pos[0] && marker.pos[0]<north){
                if (west<marker.pos[1] && marker.pos[1]<east){
                    console.log(marker.name);
                }
            }
        })
});