I have created a map using OpenLayers3. I can succesfully zoom to a layer on the map using the following code:

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

However I woulld like something similiar in an animated way.

I know about the following animations:

ol.animation.pan
ol.animation.zoom

By using these I can't zoom to a layer, using ol.animation.pan I can only pan to a point (and not to a boundingbox) and using ol.animation.zoom I can zoom to a resolution (and not to a boundingbox). So what I am looking for is an animated .fit so I can zoom animated to an extent.

Any suggestions on how I can achieve that would be appreciated :)

I have created a map using OpenLayers3. I can succesfully zoom to a layer on the map using the following code:

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

However I woulld like something similiar in an animated way.

I know about the following animations:

ol.animation.pan
ol.animation.zoom

By using these I can't zoom to a layer, using ol.animation.pan I can only pan to a point (and not to a boundingbox) and using ol.animation.zoom I can zoom to a resolution (and not to a boundingbox). So what I am looking for is an animated .fit so I can zoom animated to an extent.

Any suggestions on how I can achieve that would be appreciated :)

• javascript
• openlayers-3
• geoserver

• I guess I've already tried this, but I didn't find a way to achieve this. Maybe a Pull Request to the library is need. – Jonatas Walker Commented May 23, 2016 at 14:53

2 Answers 2

Starting with v3.20.0, OpenLayers has a new duration option on ol.View#fit(). To get a 1 second animation to the fit extent, set it to 1000:

// OpenLayers v3.20.x
view.fit(extent, size, {duration: 1000});

Also note that starting with v3.21.0, the API for ol.View#fit() is simplified - it no longer requires a size to be set (unless there is more than one map on the page):

// OpenLayers >= v3.21.0
view.fit(extent, {duration: 1000});

i just solved this way

var view = map.getView()
var pan = ol.animation.pan({ source: view.getCenter() });
var zoom = ol.animation.zoom({ resolution: view.getResolution() });
map.beforeRender(pan, zoom);
view.fit(extent, map.getSize())