fitBounds of markers with Leaflet

leaflet fitbounds
Moshi picture Moshi · Dec 12, 2014 · Viewed 9.8k times · Source

I have a array of markers named markersand i add those markers in map using LeafletJs

L.layerGroup(markers).addTo(map);

Now i want to focus on a viewport that covers all markers 

var bounds = L.latLngBounds(markers);
 map.fitBounds(bounds, { padding: [20, 20] });

Why i get Cannot read property 'lat' of undefined error message in map.fitBounds(bounds, { padding: [20, 20] }); line.

Answer

iH8 picture iH8 · Dec 12, 2014

The reason you're getting an error is because L.LatLngBounds expects two L.LatLng objects as parameter, not an array of markers, as you can see in the documentation. I would suggest using L.FeatureGroup, it's extended from L.LayerGroup but has some extras. It has a getBounds method, which will do exactly what you need, calculate the bounds according to all of the features added to the group. So you could do:

var featureGroup = L.featureGroup(markers).addTo(map);
map.fitBounds(featureGroup.getBounds());

Here's a working example on Plunker: http://plnkr.co/edit/EbzlaF05fLARDYbnXSSk

Related questions

Leaflet - How to find existing markers, and delete markers?

I have started using leaflet as an open source map, http://leaflet.cloudmade.com/ The following jQuery code will enable the creation of markers on the map on map click: map.on('click', onMapClick); function onMapClick(e) { var marker = new …

Read More
How to change the map center in Leaflet.js

The following code initializes a leaflet map. The initialize function centers the map based on user location. How do I change the center of the map to a new position after calling the initialize function? function initialize() { map = L.map(…

Read More
How to reference static assets within vue javascript

I'm looking for the right url to reference static assets, like images within Vue javascript. For example, I'm creating a leaflet marker using a custom icon image, and I've tried several urls, but they all return a 404 (Not Found): Main.…

Read More