{"id":22,"date":"2011-11-30T09:48:40","date_gmt":"2011-11-30T09:48:40","guid":{"rendered":"http:\/\/www.spatially-oriented.com\/blog\/?p=22"},"modified":"2012-05-05T22:21:23","modified_gmt":"2012-05-05T20:21:23","slug":"animated-zoom-with-openlayers","status":"publish","type":"post","link":"https:\/\/www.spatially-oriented.com\/blog\/2011\/11\/30\/animated-zoom-with-openlayers\/","title":{"rendered":"Animated zoom with OpenLayers"},"content":{"rendered":"

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

Let’s go build a Google Earth-like zoom with OpenLayers!<\/p>\n

<\/p>\n

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.<\/p>\n

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.<\/p>\n

Next you just start it and it will alert you every time the point changes on the path.<\/p>\n

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:<\/p>\n

currentTween: null,
\n ZoomToCoordinate: function (xcoord, ycoord) {
\n if (this.currentTween != null) {
\n this.currentTween.stop();
\n this.currentTween = null;
\n }<\/p>\n

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

this.currentTween = navigationTween;<\/p>\n

navigationTween.start(
\n from,
\n to,
\n duration,
\n { callbacks: callbacks }
\n );
\n },<\/p>\n

ZoomStep: function (value) {
\n this.map.setCenter(
\n new OpenLayers.LonLat(
\n value.x, value.y
\n ),
\n this.map.getCenter(),
\n false,
\n false
\n );
\n },<\/code><\/p>\n

 <\/pre>\n
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…<\/p>\n
Update 30\/11\/2011<\/strong>: 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…)<\/p>\n
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!<\/p>\n","protected":false},"excerpt":{"rendered":"
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!<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5,4],"tags":[22,25],"class_list":["post-22","post","type-post","status-publish","format-standard","hentry","category-gis","category-tech","tag-openlayers","tag-tween"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2n8yP-m","_links":{"self":[{"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/posts\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":5,"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/posts\/22\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/posts\/22\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/media?parent=22"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/categories?post=22"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spatially-oriented.com\/blog\/wp-json\/wp\/v2\/tags?post=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}