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)?
If you just want to get the bounds you can call a map. getBounds() on dragend.
Used to load and display tile layers on the map, implements ILayer interface.
Represents a geographical point with a certain latitude and longitude.
There are a number of reasons why your map might not be displaying: You have an error in your JavaScript (most likely) - use whichever debugging tool is provided with your browser to verify. you are using Internet Explorer and you have Compatibility mode ON....
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());
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With