CODEWITHSUNDEEP
javascriptopenlayers-3geoserver
Titsjmen
Titsjmen

Reputation: 809

OpenLayers3 - Animated .fit to a specific extent

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

Upvotes: 7

Views: 1381

Answers (2)

ahocevar
ahocevar

Reputation: 5647

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

Upvotes: 8

rejetto
rejetto

Reputation: 96

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

Upvotes: 0

Related Questions