Time for Action – working with Pan animations

OpenLayers gives us the ability to use different types of animations when the user pans the map. Using the properties we just discussed, let's learn how to customize the pan animations.

1. Create a new page from the template in Chapter 1. Define your map object like this, passing panMethod and panDuration properties:

   map = new OpenLayers.Map('map_element', {
     panMethod: OpenLayers.Easing.Quad.easeInOut,
     panDuration: 100
   });

2. Pan the map by clicking on one of the arrows in the control on the top left. In Firebug, call the following panTo function to pan the map to pass in a coordinate:

   map.panTo(new OpenLayers.LonLat(-18,42);)

3. You should see an animation when panning the map.

What Just Happened?

We just used the panMethod and panDuration properties to customize our map's pan animations. Changing the panDuration will affect how long the animation itself lasts, and changing the panMethod determines which type of animation to use. By using these properties...