5

After adding a series of markers to a LeafletJS map, is it possible to get Leaflet to zoom and realign it's focus to show every marker? I see many similar questions to do with Google Maps but none for Leaflet.

Something like:

map.fitAllMarkers();

I've also noticed several functions in Leaflet to get the bounds of the map, but I'm not sure how to employ those to the desired effect.

Laef
  • 1,086
  • 2
  • 11
  • 27

2 Answers2

10

You could also take advantage of the purposely made featureGroup.getBounds() method to have the map fitting the extent of your markers:

var fg = L.featureGroup([arrayOfMarkers]).addTo(map);

map.fitBounds(fg.getBounds());

Demo: http://jsfiddle.net/3v7hd2vx/28/

ghybs
  • 47,565
  • 6
  • 74
  • 99
3

In the end, this is actually quite simple, though not united into one function. First, you need to create a Leaflet bounds object:

var bounds = new L.LatLngBounds();

Then, for each marker on the map:

bounds.extend(markerObject.getLatLng());

Finally, apply the new bounds to the map:

mapObject.fitBounds(bounds);
Laef
  • 1,086
  • 2
  • 11
  • 27