Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the bounding box of the visible leaflet map?

Tags:

leaflet

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)?

like image 467
bernie2436 Avatar asked Apr 08 '14 21:04

bernie2436


People also ask

How do you get map bounds Leaflet?

If you just want to get the bounds you can call a map. getBounds() on dragend.

What is Tilelayer in Leaflet?

Used to load and display tile layers on the map, implements ILayer interface.

What is Latlng in Leaflet?

Represents a geographical point with a certain latitude and longitude.

Why is map not showing in Leaflet?

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....


2 Answers

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());
});
like image 105
tmcw Avatar answered Oct 23 '22 20:10

tmcw


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.

like image 22
Roger Hill Avatar answered Oct 23 '22 21:10

Roger Hill