Zoom to fit all markers in Mapbox or Leaflet

Question

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  lt  latlng length  i        latlngbounds extend latlng i      map fitBounds latlngbounds

User · Answer

For Leaflet  I m using      map setView markersLayer getBounds   getCenter

User · Answer

You also can locate all features inside a FeatureGroup or all the featureGroups  see how it works    x000D   x000D    Group1 x000D  m1 L marker  7 11  -70 11    x000D  m2 L marker  7 33  -70 33    x000D  m3 L marker  7 55  -70 55    x000D  fg1 L featureGroup  m1 m2 m3    x000D   x000D    Group2 x000D  m4 L marker  3 11  -75 11    x000D  m5 L marker  3 33  -75 33    x000D  m6 L marker  3 55  -75 55    x000D  fg2 L featureGroup  m4 m5 m6    x000D   x000D    BaseMap x000D  baseLayer   L tileLayer  http    s  tile openstreetmap org  z   x   y  png    x000D  var map   L map  map     x000D    center   3  -70   x000D    zoom  4  x000D    layers   baseLayer  fg1  fg2  x000D      x000D   x000D    locate group 1 x000D  function LocateOne     x000D      LocateAllFeatures map  fg1   x000D    x000D   x000D  function LocateAll     x000D      LocateAllFeatures map   fg1 fg2    x000D    x000D   x000D    Locate the features x000D  function LocateAllFeatures iobMap  iobFeatureGroup    x000D    if Array isArray iobFeatureGroup       x000D     var obBounds   L latLngBounds    x000D     for  var i   0  i  lt  iobFeatureGroup length  i      x000D      obBounds extend iobFeatureGroup i  getBounds     x000D       x000D     iobMap fitBounds obBounds      x000D      else   x000D     iobMap fitBounds iobFeatureGroup getBounds     x000D      x000D    x000D   mymap  x000D    height  300px  x000D    width  100   x000D    x000D   lt script src  https   unpkg com leaflet 1 3 1 dist leaflet js  gt  lt  script gt  x000D   lt link href  https   unpkg com leaflet 1 3 1 dist leaflet css  rel  stylesheet   gt  x000D   x000D   lt div id  map  class  mymap  gt  lt  div gt  x000D   lt button onclick  LocateOne    gt locate group 1 lt  button gt  x000D   lt button onclick  LocateAll    gt locate All lt  button gt  x000D   x000D   x000D

User · Answer

To fit to the visible markers only  I ve this method   fitMapBounds            Get all visible Markers     const visibleMarkers           this map eachLayer function  layer            if  layer instanceof L Marker                visibleMarkers push layer                             Ensure there s at least one visible Marker     if  visibleMarkers length  gt  0                Create bounds from first Marker then extend it with the rest         const markersBounds   L latLngBounds  visibleMarkers 0  getLatLng              visibleMarkers forEach  marker    gt                markersBounds extend marker getLatLng                             Fit the map with the visible markers bounds         this map flyToBounds markersBounds                padding  L point 36  36   animate  true

User · Answer

var markerArray       markerArray push L marker  51 505  -0 09         var group   L featureGroup markerArray  addTo map   map fitBounds group getBounds

User · Answer

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

User · Answer

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

User · Answer

var group   new L featureGroup  marker1  marker2  marker3     map fitBounds group getBounds       See the documentation for more info

User · Answer

The best way is to use the next code  var group   new L featureGroup  marker1  marker2  marker3     map fitBounds group getBounds

User · Answer

You have an array of L Marker  let markers    marker1  marker2  marker3   let latlngs   markers map marker   gt  marker getLatLng     let latlngBounds   L latLngBounds latlngs   map fitBounds latlngBounds     OR with a smooth animation    map flyToBounds latlngBounds

[leaflet] Zoom to fit all markers in Mapbox or Leaflet

Examples related to leaflet

Examples related to mapbox