Smooth GDragging at last. Thanks to overstdr for digging up the getDragObject method. With v2.93 and later we no longer get flickers on panning. Non-API smooth dragging is no longer supported. r=crschmidt,me (closes #1402)

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

examples/google.html

@@ -57,6 +57,11 @@
 
     <div id="map"></div>
 
-    <div id="docs"></div>
+    <div id="docs">
+      For best performance, you must be using a version of the Google Maps
+      API which is v2.93 or higher. In order to use this version of the API,
+      it is best to simply set your application to use the string "v=2" in
+      the request, rather than tying your application to an explicit version.
+    </div>
   </body>
 </html>

examples/spherical-mercator.html

@@ -11,7 +11,7 @@
     </style>
 
     <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>
-    <script src='http://maps.google.com/maps?file=api&amp;v=2.82&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
+    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
     <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
 
     <script src="../lib/OpenLayers.js"></script>

lib/OpenLayers/Control/DragPan.js

@@ -46,13 +46,11 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
     */
     panMap: function(xy) {
         this.panned = true;
-        var deltaX = this.handler.last.x - xy.x;
+        this.map.pan(
-        var deltaY = this.handler.last.y - xy.y;
+            this.handler.last.x - xy.x,
-        var size = this.map.getSize();
+            this.handler.last.y - xy.y,
-        var newXY = new OpenLayers.Pixel(size.w / 2 + deltaX,
+            {dragging: this.handler.dragging, animate: false}
-                                         size.h / 2 + deltaY);
+        );
-        var newCenter = this.map.getLonLatFromViewPortPx( newXY );
-        this.map.setCenter(newCenter, null, this.handler.dragging);
     },
     
     /**

lib/OpenLayers/Layer/EventPane.js

@@ -241,10 +241,9 @@ OpenLayers.Layer.EventPane = OpenLayers.Class(OpenLayers.Layer, {
 
                     if (dragging && this.dragPanMapObject && 
                         this.smoothDragPan) {
-                        var resolution = this.map.getResolution();
+                        var oldPx = this.map.getViewPortPxFromLonLat(oldCenter);
-                        var dX = (newCenter.lon - oldCenter.lon) / resolution;
+                        var newPx = this.map.getViewPortPxFromLonLat(newCenter);
-                        var dY = (newCenter.lat - oldCenter.lat) / resolution;
+                        this.dragPanMapObject(newPx.x-oldPx.x, oldPx.y-newPx.y);
-                        this.dragPanMapObject(dX, dY);
                     } else {
                         var center = this.getMapObjectLonLatFromOLLonLat(newCenter);
                         var zoom = this.getMapObjectZoomFromOLZoom(newZoom);
@@ -281,18 +280,6 @@ OpenLayers.Layer.EventPane = OpenLayers.Class(OpenLayers.Layer, {
             var moPixel = this.getMapObjectPixelFromOLPixel(viewPortPx);
             var moLonLat = this.getMapObjectLonLatFromMapObjectPixel(moPixel);
             lonlat = this.getOLLonLatFromMapObjectLonLat(moLonLat);
-            var xrem = this.map.size.w % 2;
-            var yrem = this.map.size.h % 2;
-            if(xrem != 0 || yrem != 0) {
-                // odd sized viewport
-                var olPx = viewPortPx.add(xrem, yrem);
-                var moPx = this.getMapObjectPixelFromOLPixel(olPx);
-                var moLoc = this.getMapObjectLonLatFromMapObjectPixel(moPx);
-                var olLoc = this.getOLLonLatFromMapObjectLonLat(moLoc);
-                // adjust by half a pixel in odd dimension(s)
-                lonlat.lon += (olLoc.lon - lonlat.lon) / 2;
-                lonlat.lat += (olLoc.lat - lonlat.lat) / 2;
-            }
         }
         return lonlat;
     },

lib/OpenLayers/Layer/Google.js

@@ -75,6 +75,13 @@ OpenLayers.Layer.Google = OpenLayers.Class(
      *     other maps, etc. 
      */
     sphericalMercator: false, 
+    
+    /**
+     * Property: dragObject
+     * {GDraggableObject} Since 2.93, Google has exposed the ability to get
+     *     the maps GDraggableObject. We can now use this for smooth panning
+     */
+    dragObject: null, 
 
     /** 
      * Constructor: OpenLayers.Layer.Google
@@ -106,6 +113,14 @@ OpenLayers.Layer.Google = OpenLayers.Class(
         try {
             // create GMap, hide nav controls
             this.mapObject = new GMap2( this.div );
+            
+            //since v 2.93 getDragObject is now available.
+            if(typeof this.mapObject.getDragObject == "function") {
+                this.dragObject = this.mapObject.getDragObject();
+            } else {
+                this.dragPanMapObject = null;
+            }
+
 
             // move the ToS and branding stuff up to the pane
             // thanks a *mil* Erik for thinking of this
@@ -123,15 +138,8 @@ OpenLayers.Layer.Google = OpenLayers.Class(
             termsOfUse.style.right = "";
             termsOfUse.style.bottom = "";
 
-            //can we do smooth panning? (some versions don't)
-            if ( !this.mapObject.G || !this.mapObject.G.qb ||
-                 (typeof this.mapObject.G.qb != "function") ) {
-
-                this.dragPanMapObject = null;
-            }
-
         } catch (e) {
-            // do not crash
+            OpenLayers.Console.error(e);
         }
                
     },
@@ -343,11 +351,9 @@ OpenLayers.Layer.Google = OpenLayers.Class(
      * dY - {Integer}
      */
     dragPanMapObject: function(dX, dY) {
-        var newX = this.mapObject.G.left - dX;
+        this.dragObject.moveBy(new GSize(-dX, dY));
-        var newY = this.mapObject.G.top + dY;
-        this.mapObject.G.qb(newX, newY);
     },
-   
+
     /**
      * APIMethod: getMapObjectCenter
      * 

lib/OpenLayers/Map.js

@@ -1317,27 +1317,33 @@ OpenLayers.Map = OpenLayers.Class({
      * Parameters:
      * dx - {Integer}
      * dy - {Integer}
-     * options - {Object} Only one at this time: "animate", which uses
+     * options - {Object} Options to configure panning:
-     *    panTo instead of setCenter. Default is true.
+     *  - *animate* {Boolean} Use panTo instead of setCenter. Default is true.
+     *  - *dragging* {Boolean} Call setCenter with dragging true.  Default is
+     *    false.
      */
     pan: function(dx, dy, options) {
-        
+        // this should be pushed to applyDefaults and extend
         if (!options) {
-            options = {animate: true}
+            options = {};
-        }    
+        }
+        OpenLayers.Util.applyDefaults(options, {
+            animate: true,
+            dragging: false
+        });
         // getCenter
         var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
 
         // adjust
         var newCenterPx = centerPx.add(dx, dy);
         
-        // only call setCenter if there has been a change
+        // only call setCenter if not dragging or there has been a change
-        if (!newCenterPx.equals(centerPx)) {
+        if (!options.dragging || !newCenterPx.equals(centerPx)) {
             var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
             if (options.animate) {
                 this.panTo(newCenterLonLat);
             } else {
-                this.setCenter(newCenterLonLat);
+                this.setCenter(newCenterLonLat, null, options.dragging);
             }    
         }