This site has excellent resizing (and drifting) animations. http://www.tomtom.com/livetraffic

Anybody know how the zoom effect is achieved? OpenLayers has an ancient sandbox with animated zooming, but it was never integrated.

  • 1
    I'll note that on neither of my browsers (Safari on Mac or Firefox on Mac) do I get any kind of animated zooming effect on that website; this kind of problem is the reason the animated zooming was never enabled. In addition, it regularly crashed some browsers. In the end, it was just too risky. That said, with newer webkit + moz transform code for pinching and zooming, there is sufficient support in OpenLayers to explore animated zooming behavior which is hardware accelerated in the browser without complex DOM manipulations, and I expect one of our developers may show an interest in that soon. Mar 23 '11 at 23:55
  • 1
    Do you keep your browsers up to date? It works in Chrome and Firefox on Linux. Browsers are sufficiently fast enough to do JavaScript based effects, you can ignore them in ie7/8. If this isn't enough evidence, you can already see way better zoom effects in Google, Bing, Tile5, Polymaps and Tomtom (w/OL).
    – Drew
    Mar 24 '11 at 16:02

You can use the transition effect property on your layer.

Set the property to transitionEffect: 'resize'

  • An Example of it: openlayers.org/dev/examples/transition.html
    – CaptDragon
    Mar 28 '11 at 14:08
  • 1
    Yeah I'm familiar with that one, it does work a little bit but not nearly as well as Tomtom's. It also has a very high chance of flashing white.
    – Drew
    Mar 28 '11 at 17:44
  • @Drew I have looked at TomTom's sourcecode, and it seems they have implemented their own zoomfunction. As far as i know transitionEffect: resize is currently the only way to get something that reminds of that effect. Apr 11 '11 at 9:08
  • I agree, they did not alter transitionEffect even though they have it turned on. It occurred to me the other day, they may not be using the default navigation control and have implemented their own. This would control how panning and zooming works on the page.
    – Drew
    Apr 12 '11 at 19:38

From what I know, it's not possible to animate Zoom actions. For information , you can use the kinetic effect on dragging map : http://openlayers.org/dev/examples/kinetic.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.