Animated zoom with OpenLayers

So I was dabbling with some OpenLayers stuff at work and stumbled upon an example of the Tweening class of OpenLayers. Instantly, I got a nice idea.

Let’s go build a Google Earth-like zoom with OpenLayers!

The tweening class is actually pretty basic. Well, to be honest I wouldn’t be able to build it, but the idea of it is pretty basic nonetheless.

You have point A and point B, you specify a duration / number of steps in between and it will calculate a path between the two points.

Next you just start it and it will alert you every time the point changes on the path.

So, the example linked above moves the box, but what if we moved the map’s center itself? We have an OpenLayers.Map override where I added the following functions:

currentTween: null,
ZoomToCoordinate: function (xcoord, ycoord) {
if (this.currentTween != null) {
this.currentTween.stop();
this.currentTween = null;
}

var center = this.getCenter();
var from = {
x: center.lon,
y: center.lat
};
var to = {
x: xcoord,
y: ycoord
}
var duration = 20;
var callbacks = {
eachStep: this.ZoomStep
};
var navigationTween = new OpenLayers.Tween(
OpenLayers.Easing.Quad.easeInOut
);
navigationTween.map = this;

this.currentTween = navigationTween;

navigationTween.start(
from,
to,
duration,
{ callbacks: callbacks }
);
},

ZoomStep: function (value) {
this.map.setCenter(
new OpenLayers.LonLat(
value.x, value.y
),
this.map.getCenter(),
false,
false
);
},

Next up will be trying to get a google earth style zooming. First it should zoom out a bit, then slide, then zoom in again. This should drastically lower the number of tiles Openlayers fetches. More on that later…

Update 30/11/2011: I tried to create a 3 part tween: zoom Out, Slide, Zoom In, but I think the zooming in and out takes too much time / effort for a smooth animation. You never really see what is happening, unless you set the step timing (Tween.INTERVAL) to half a second or or more. (although I didn’t try it out yet…)

Also, sliding large area’s of your map doesn’t really help the user as well. Plus you might actually overflow your wms/wfs server with requests… So be carefull, there are some baby dragons on this path!