Add support for animated panning, with most of the work done by Pierre, thx pierre! panTo method now animates when moving. (Closes #110)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@6111 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Control/OverviewMap.js

@@ -511,7 +511,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
      */
     updateMapToRect: function() {
         var lonLatBounds = this.getMapBoundsFromRectBounds(this.rectPxBounds);
-        this.map.setCenter(lonLatBounds.getCenterLonLat(), this.map.zoom);
+        this.map.panTo(lonLatBounds.getCenterLonLat());
     },
 
     /**

lib/OpenLayers/Map.js

@@ -1246,9 +1246,14 @@ OpenLayers.Map = OpenLayers.Class({
      * Parameters:
      * dx - {Integer}
      * dy - {Integer}
+     * options - {Object} Only one at this time: "animate", which uses
+     *    panTo instead of setCenter. Default is true.
      */
-    pan: function(dx, dy) {
-
+    pan: function(dx, dy, options) {
+        
+        if (!options) {
+            options = {}
+        }    
         // getCenter
         var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
 
@@ -1258,10 +1263,55 @@ OpenLayers.Map = OpenLayers.Class({
         // only call setCenter if there has been a change
         if (!newCenterPx.equals(centerPx)) {
             var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
-            this.setCenter(newCenterLonLat);
+            if (options.animate) {
+                this.panTo(newCenterLonLat);
+            } else {
+                this.setCenter(newCenterLonLat);
+            }    
         }
 
    },
+   
+   /** 
+     * APIMethod: panTo
+     * Allows user to pan to a new lonlat
+     * If the new lonlat is in the current extent the map will slide smoothly
+     * 
+     * Parameters:
+     * lonlat - {<OpenLayers.Lonlat>}
+     */
+    panTo: function(lonlat) {
+        if (this.getExtent().containsLonLat(lonlat)) {
+            if (!this.panTween) {
+                this.panTween = new OpenLayers.Tween(OpenLayers.Easing.Expo.easeOut);
+            }
+            var center = this.getCenter();
+            var from = {
+                lon: center.lon,
+                lat: center.lat
+            };
+            var to = {
+                lon: lonlat.lon,
+                lat: lonlat.lat
+            };
+            this.panTween.start(from, to, 50, {
+                callbacks: {
+                    start: OpenLayers.Function.bind(function(lonlat) {
+                        this.events.triggerEvent("movestart");
+                    }, this),
+                    eachStep: OpenLayers.Function.bind(function(lonlat) {
+                        var lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
+                        this.moveTo(lonlat, this.zoom, true);
+                    }, this),
+                    done: OpenLayers.Function.bind(function(lonlat) {
+                        this.events.triggerEvent("moveend");
+                    }, this)
+                }
+            });
+        } else {
+            this.setCenter(lonlat);
+        }
+    },
 
     /**
      * APIMethod: setCenter
@@ -1302,6 +1352,10 @@ OpenLayers.Map = OpenLayers.Class({
         var forceZoomChange = options.forceZoomChange;
         // noEvent is false by default
         var noEvent = options.noEvent;
+
+        if (this.panTween && options.caller == "setCenter") {
+            this.panTween.stop();
+        }    
              
         if (!this.center && !this.isValidLonLat(lonlat)) {
             lonlat = this.maxExtent.getCenterLonLat();