I've been looking at the animation features of openlayers and I can see how simple it is to zoom to a given point and resolution using

view.animate({
    center: position,
    zoom: 11
});

but what I can't figure out is how to animate

map.getView().fit(extent, map.getSize());

Can anybody give me some pointers?

Thanks in advance

I've been looking at the animation features of openlayers and I can see how simple it is to zoom to a given point and resolution using

view.animate({
    center: position,
    zoom: 11
});

but what I can't figure out is how to animate

map.getView().fit(extent, map.getSize());

Can anybody give me some pointers?

Thanks in advance

• javascript
• openlayers
• openlayers-3

1 Answer 1

The fit function does support animations in Openlayers 3. The third parameter is an object where different options (duration, easing...) can be set, and you can do it easily:

map.getView().fit(extent, map.getSize(), { duration: 1000 });

You can take a look at the Openlayers 3 API to see more details about the options parameter.

I have also created a jsFiddle example where you can see this working.

Be careful! OpenLayers v4.0.1 is here:

With the recently released version of Openlayers, some things related to this method were changed, so if you read the documentation for the fit function in the latest Openlayers API you will find that only 2 parameters are allowed now, since the size does not need to be passed as parameter (However, it can be assigned in the options parameter). So your example adapted to Openlayers v4.0.1 would be like follows:

map.getView().fit(extent, { duration: 1000 });

It's important to keep these changes in mind because it can bring confussion while you use the official API.