Zoom to fit all markers in Mapbox or Leaflet
How do I set view to see all markers on map in Mapbox or Leaflet? Like Google Maps API does with bounds
?
E.g:
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);
Solution 1:
var group = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(group.getBounds());
See the documentation for more info.
Solution 2:
The 'Answer' didn't work for me some reasons. So here is what I ended up doing:
////var group = new L.featureGroup(markerArray);//getting 'getBounds() not a function error.
////map.fitBounds(group.getBounds());
var bounds = L.latLngBounds(markerArray);
map.fitBounds(bounds);//works!
Solution 3:
var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());
Solution 4:
Leaflet also has LatLngBounds that even has an extend function, just like google maps.
http://leafletjs.com/reference.html#latlngbounds
So you could simply use:
var latlngbounds = new L.latLngBounds();
The rest is exactly the same.