O'Reilly logo

OpenLayers 2.10 by Erik Hazzard

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required