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);
The best way is to use the next code
var group = new L.featureGroup([marker1, marker2, marker3]);
map.fitBounds(group.getBounds());
You have an array of L.Marker:
let markers = [marker1, marker2, marker3]
let latlngs = markers.map(marker => marker.getLatLng())
let latlngBounds = L.latLngBounds(latlngs)
map.fitBounds(latlngBounds)
// OR with a smooth animation
// map.flyToBounds(latlngBounds)
You also can locate all features inside a FeatureGroup or all the featureGroups, see how it works!
//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_
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!
For Leaflet, I'm using
map.setView(markersLayer.getBounds().getCenter());
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 > 0) {
// Create bounds from first Marker then extend it with the rest
const markersBounds = L.latLngBounds([visibleMarkers[0].getLatLng()]);
visibleMarkers.forEach((marker) => {
markersBounds.extend(marker.getLatLng());
});
// Fit the map with the visible markers bounds
this.map.flyToBounds(markersBounds, {
padding: L.point(36, 36), animate: true,
});
}
}
var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());
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.
Source: Stackoverflow.com