Get the bounding box of the visible leaflet map?

I have a leaflet map that pans and zooms. How can I dynamically get the lat/long of the edges of the map (after zooming in/out + panning)?

Solution 1:

It is, as you may guess:

map.getBounds();

If you want to get the bounds after panning and zooming, use events, like

map.on('moveend', function() { 
     alert(map.getBounds());
});

Solution 2:

The above answer is correct, but not very helpful and unfortunately, the leaflet docs don't give much detail about the getBounds() call.

If you add this to your map init function, you can see the map data displayed:

map.on('dragend', function onDragEnd(){
    var width = map.getBounds().getEast() - map.getBounds().getWest();
    var height = map.getBounds().getNorth() - map.getBounds().getSouth();

    alert (
        'center:' + map.getCenter() +'\n'+
        'width:' + width +'\n'+
        'height:' + height +'\n'+
        'size in pixels:' + map.getSize()
    )});

Note that size is the pixel dimensions of the map window, where the bounds are the scaled internal sizes. Try zooming and you will see that the size stays constant, but the height and with doubles for each level of zoom.

There are a whole bunch of methods that live under the LatLngBounds object, so you should be able to find one of the calls there that can give you whatever info you are looking for.