171

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);

13 Answers 13

361
var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

See the documentation for more info.

10
  • 4
    The problem with this solution is that it can sometimes cut off a northerly marker, since the marker extends beyonds the bounds given by its coordinates. Dec 11, 2013 at 18:23
  • 97
    from @user317946: "map.fitBounds(markers.getBounds().pad(0.5)); now the icons wont cut off. :-)" Jan 19, 2014 at 15:24
  • 16
    I'm glad i Googled this before reinventing the wheel. Thanks
    – martynas
    Jul 18, 2014 at 15:54
  • 5
    Just in case it isn't obvious to anyone... You can get bounds of most leaflet objects. map.fitBounds(circle.getBounds()); for example. Aug 26, 2014 at 15:30
  • 11
    You can use markers.getBounds().pad(<percentage>) if you want to extend bounds by a given percentage but you can also pass the padding option to fitBounds in order to set the padding in pixels. markers.getBounds(), {padding: L.point(20, 20)}) Jun 10, 2016 at 17:30
31

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!
3
  • 1
    Trying to do this but getting Error: LngLatLike argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]. Any idea?
    – returnvoid
    Nov 20, 2018 at 21:23
  • 1
    tried it got: Uncaught Error: Bounds are not valid. Jan 7, 2023 at 21:38
  • 1
    I am sorry folks. I have not used this technology in years; as you can see, the Question was posted by me years ago. @fayssalelansari : I suggest print the Bounds in browser's console to see if the values look okay. Best luck you all. Jan 8, 2023 at 13:29
21
var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());
1
  • 1
    It works without the addTo(map): map.fitBounds(L.featureGroup(markerArray ).getBounds()); will this make any difference? Sep 21, 2016 at 14:36
17

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.

1
  • 3
    Thank you! For me the solution, per the Answer above, was returning 'getBounds() is not a function. So I changed my code per your suggestion. I have it in my own Answer. May 21, 2014 at 17:58
12

Belatedly, I didn't see any answers using Mapbox, despite Mapbox has more functionality such as padding, animation, and max zoom.


const coordinates = [<coordiantes>...]

// Create a 'LngLatBounds' with the first coordinate.
const bounds = new mapboxgl.LngLatBounds(
  coordinates[0],
  coordinates[0]
);
 
// Extend the 'LngLatBounds' to include every coordinate in the bounds result.
for (const coord of coordinates) {
  bounds.extend(coord);
}

// Note there are other options such as easeing animation and maxZoom
map.fitBounds(bounds, {
  padding: 20
});

Demo

0
7

For Leaflet, I'm using

    map.setView(markersLayer.getBounds().getCenter());
1
  • This was the only solution I could get to work with a single marker in Chrome
    – Tim Styles
    Sep 24, 2019 at 9:08
7

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)
4

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

//Group1
m1=L.marker([7.11, -70.11]);
m2=L.marker([7.33, -70.33]);
m3=L.marker([7.55, -70.55]);
fg1=L.featureGroup([m1,m2,m3]);

//Group2
m4=L.marker([3.11, -75.11]);
m5=L.marker([3.33, -75.33]);
m6=L.marker([3.55, -75.55]);
fg2=L.featureGroup([m4,m5,m6]);

//BaseMap
baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = L.map('map', {
  center: [3, -70],
  zoom: 4,
  layers: [baseLayer, fg1, fg2]
});

//locate group 1
function LocateOne() {
    LocateAllFeatures(map, fg1);
}

function LocateAll() {
    LocateAllFeatures(map, [fg1,fg2]);
}

//Locate the features
function LocateAllFeatures(iobMap, iobFeatureGroup) {
		if(Array.isArray(iobFeatureGroup)){			
			var obBounds = L.latLngBounds();
			for (var i = 0; i < iobFeatureGroup.length; i++) {
				obBounds.extend(iobFeatureGroup[i].getBounds());
			}
			iobMap.fitBounds(obBounds);			
		} else {
			iobMap.fitBounds(iobFeatureGroup.getBounds());
		}
}
.mymap{
  height: 300px;
  width: 100%;
}
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>

<div id="map" class="mymap"></div>
<button onclick="LocateOne()">locate group 1</button>
<button onclick="LocateAll()">locate All</button>

3

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,
        });
    }
}
1
//Create a point Layer (in this case a GeoJSON source)
let pointLayer = L.geoJSON(pointSource, {
    pointToLayerL pointToLayer,
    onEachFeature: onEachFeature
});
//Add the newly created layer to the mapObject
pointLayer.addTo(mapObject);

//Set a padding variable for the space around the bounds
let paddingCoef = (0.5);

//Call the fit bounds to adjust to the padded extent of points.
mapObject.fitBounds(pointLayer.getBounds().pad(paddingCoef));
0

The best way is to use the next code

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());
1
  • 2
    there is similar answer
    – AHOYAHOY
    Jun 12, 2019 at 0:57
0

in MapBox you can use fitBound method.

you can use docs.mapbox

0

For Mapbox/MapLibre, here we go.

var bounds = new mablibgl.LngLatBounds();

geojson.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.