[GIS] Unable to dynamically locate map boundary coordinates in OSM/Leaflet

cartographycoordinatesjavascriptleaflet

I have been trying for the past hour to take the coordinates of the map edge in a OSM/leaflet application I am making. While I can get the coordinates of the center, and I can get the coordinates of the two poinths the user inputs, the bounds of the map remain unchanging and static on the ones the map loaded. I think it has to do with the map.setView() I call in the start of the code, but I am not sure how to fix that. The code is as follows (the problematic part is actually on the lower part of the code): 

var map = L.map('map').setView([37.92,23.69], 13);
var bounds=map.getBounds();
var nodeArray=new Array();
var markerArray = new Array();
var startPoint=null;
var endPoint=null;
var lowerBounds=bounds.getSouthWest();
var upperBounds=bounds.getNorthEast();
var markerCounter=0;



L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18}).addTo(map);

var popup = L.popup();
var road = L.polyline(nodeArray).addTo(map);

map.on('click', onMapClick);
function onMapClick(e) {
    markerCounter=markerArray.length;
    if (markerCounter==2){
        map.removeLayer(markerArray[0]);
        map.removeLayer(markerArray[1]);
        markerArray=new Array();
        endPoint=null;
        startPoint=null;
    }else{
        var marker = new L.Marker(e.latlng, {draggable:false});
        markerArray.push(marker);
        for (i=0;i<=markerArray.length;i++){
            map.addLayer(marker);
        }
        if (markerCounter==1){
            marker.bindPopup("Your destination is: "+(e.latlng.toString()).substr(6,20)).openPopup();
            endPoint=(e.latlng.toString()).substr(6,20);
            markerCounter=2;
        }
        if (markerCounter==0){
            marker.bindPopup("Your starting place is: "+(e.latlng.toString()).substr(6,20)).openPopup();
            startPoint=(e.latlng.toString()).substr(6,20);
            markerCounter=1;
        }

    }
};

function runScript(){
    if (markerCounter==0){
        alert('You have give us no data. We cannot calculate a route');
    }else if (markerCounter==1){
        alert('You have give us only one point. We cannot calculate a route');
    }else{
        console.log('LB:'+lowerBounds+" - "+"UB:"+upperBounds+"/SP:"+startPoint+" - EP:"+endPoint);
        } 
}

Does anyone have any idea what is the problem?I am unfortunately entirely new to JS and OSM/Leaflet, so I cannot really see easily problems like those.

Best Answer

You must update your variable bounds every time you want to access the current bounds of the map. In your code, this would look like this:

function runScript() {
  ...
  else {
    bounds = map.getBounds()
    lowerBounds = bounds.getSouthWest()
    upperBounds = bounds.getNorthEast()
    console.log('LB:'+lowerBounds+" - "+"UB:"+upperBounds+"/SP:"+startPoint+" - EP:"+endPoint)
  }
}

Alternatively you could bind a listener to the map that fires on moveend:

map.on("moveend", (e) => { 
    // updates always after map has been moved 
    bounds = map.getBounds()
    lowerBounds = bounds.getSouthWest()
    upperBounds = bounds.getNorthEast()
})
Related Question