Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Leaflet.js fitBounds with padding?

Tags:

leaflet

I'm trying to set the fitBounds option in a leaflet map like this:

var bounds = new L.LatLngBounds([[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]]); map.fitBounds(bounds, { padding: [20, 20] }); 

However this doesn't seem to add any padding ? at least the map "zoom level" doesn't change, and it's always showing the two points in the edges (i.e. one is top far right and the other is bottom far left). For some marker sets, it works ok, the zoom is at a decent level away and you can see everything nicely. However when the items are quite close to each other, it seems it zooms in a bit too much unless I can fit it with some "padding."

Also I'm unsure if the bounds would be correct like that? Should I use instead just:

var bounds = [[Math.max(lat, borneLat), Math.max(lng, borneLng)], [Math.min(lat, borneLat), Math.min(lng, borneLng)]]; 
like image 275
dan2k3k4 Avatar asked Oct 16 '13 15:10

dan2k3k4


1 Answers

map.fitBounds(bounds, {padding: []}) should work. I suggest you to change padding to eg. [50, 50], maybe your padding values are too small.

Check out this JSFiddle example.

like image 99
yarl Avatar answered Sep 19 '22 11:09

yarl