In leaflet/mapbox, why can't I set the duration of `map.fitBounds`?

921 views Asked by At

I tried this:

map.fitBounds(L.polyline([L.latLng(40,9), L.latLng(1,2)]).getBounds(), {
  padding: [50, 50],
  maxZoom: 17,
  animate: true,
  duration: 10
});

I expect the animation to take 10 seconds to complete, but it completes very fast.. Does anyone have ideas about how to make the duration longer for fitBounds?

3

There are 3 answers

1
Jonatas Walker On BEST ANSWER

It should be set as:

map.fitBounds(bounds, {
    padding: [50, 50],
    maxZoom: 18,
    animate: true,
    pan: {
        duration: 10
    }
});
0
tonejac On

I was able to get this working by adding the duration property in the options object like this:

map.fitBounds(bounds, {
    padding: 50,
    maxZoom: 18,
    animate: true,
    duration: 10000 // ten seconds in milliseconds
});
0
chrismarx On

It looks like a "maxDuration" option was added:

https://github.com/mapbox/mapbox-gl-js/issues/3904

But oddly it does not appear to be documented and it also seems buggy, at least with react-mapbox-gl