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

You also can locate all features inside a FeatureGroup or all the featureGroups, see how it works!

_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 < 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_

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>_x000D_
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>_x000D_
_x000D_
<div id="map" class="mymap"></div>_x000D_
<button onclick="LocateOne()">locate group 1</button>_x000D_
<button onclick="LocateAll()">locate All</button>

_x000D_

User · Answer

For Leaflet  I m using      map setView markersLayer getBounds   getCenter

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

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

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

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

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

User · Answer

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

User · Answer

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

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

Examples related to leaflet

Examples related to mapbox