Use view.animate() to auto-pan an overlay

externs/olx.js

@@ -398,9 +398,9 @@ olx.OverlayOptions.prototype.autoPan;
 
 
 /**
- * The options used to create a `ol.animation.pan` animation. This animation
+ * The animation options used to pan the overlay into view. This animation
- * is only used when `autoPan` is enabled. By default the default options for
+ * is only used when `autoPan` is enabled. A `duration` and `easing` may be
- * `ol.animation.pan` are used. If set to `null` the panning is not animated.
+ * provided to customize the animation.
  * @type {olx.animation.PanOptions|undefined}
  * @api
  */
@@ -787,10 +787,10 @@ olx.animation.BounceOptions.prototype.easing;
 
 
 /**
- * @typedef {{source: ol.Coordinate,
+ * @typedef {{
- *     start: (number|undefined),
+ *   duration: (number|undefined),
- *     duration: (number|undefined),
+ *   easing: (function(number):number|undefined)
- *     easing: (function(number):number|undefined)}}
+ * }}
  */
 olx.animation.PanOptions;
 

src/ol/overlay.js

@@ -3,7 +3,6 @@ goog.provide('ol.Overlay');
 goog.require('ol');
 goog.require('ol.MapEvent');
 goog.require('ol.Object');
-goog.require('ol.animation');
 goog.require('ol.dom');
 goog.require('ol.events');
 goog.require('ol.extent');
@@ -71,8 +70,8 @@ ol.Overlay = function(options) {
    * @private
    * @type {olx.animation.PanOptions}
    */
-  this.autoPanAnimation_ = options.autoPanAnimation !== undefined ?
+  this.autoPanAnimation_ = options.autoPanAnimation ||
-      options.autoPanAnimation : /** @type {olx.animation.PanOptions} */ ({});
+      /** @type {olx.animation.PanOptions} */ ({});
 
   /**
    * @private
@@ -380,11 +379,11 @@ ol.Overlay.prototype.panIntoView_ = function() {
         centerPx[1] + delta[1]
       ];
 
-      if (this.autoPanAnimation_) {
+      map.getView().animate({
-        this.autoPanAnimation_.source = center;
+        center: map.getCoordinateFromPixel(newCenterPx),
-        map.beforeRender(ol.animation.pan(this.autoPanAnimation_));
+        duration: this.autoPanAnimation_.duration,
-      }
+        easing: this.autoPanAnimation_.easing
-      map.getView().setCenter(map.getCoordinateFromPixel(newCenterPx));
+      });
     }
   }
 };