fitBounds of markers with Leaflet

14.7k views Asked by At

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.

1

There are 1 answers

3
iH8 On BEST ANSWER

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