Merge pull request openlayers#1074 from ahocevar/google-zoom

zoomStart event and close-to-synced zoom for EventPane layers

examples/spherical-mercator.html

@@ -54,7 +54,9 @@ <h1 id="title">OpenLayers Spherical Mercator Example</h1>
         div: "map",
         projection: "EPSG:900913",
         displayProjection: "EPSG:4326",
-        numZoomLevels: 18
+        numZoomLevels: 18,
+        // approximately match Google's zoom animation
+        zoomDuration: 10
     });
 
     // create Google Mercator layers

lib/OpenLayers/Layer/EventPane.js

@@ -126,6 +126,8 @@ OpenLayers.Layer.EventPane = OpenLayers.Class(OpenLayers.Layer, {
         if (this.mapObject == null) {
             this.loadWarningMessage();
         }
+
+        this.map.events.register('zoomstart', this, this.onZoomStart);
     },
 
     /**
@@ -137,11 +139,27 @@ OpenLayers.Layer.EventPane = OpenLayers.Class(OpenLayers.Layer, {
      * map - {<OpenLayers.Map>}
      */
     removeMap: function(map) {
+        this.map.events.unregister('zoomstart', this, this.onZoomStart);
+
         if (this.pane && this.pane.parentNode) {
             this.pane.parentNode.removeChild(this.pane);
         }
         OpenLayers.Layer.prototype.removeMap.apply(this, arguments);
     },
+
+    /**
+     * Method: onZoomStart
+     *
+     * Parameters:
+     * evt - zoomstart event object with center and zoom properties.
+     */
+    onZoomStart: function(evt) {
+        if (this.mapObject != null) {
+            var center = this.getMapObjectLonLatFromOLLonLat(evt.center);
+            var zoom = this.getMapObjectZoomFromOLZoom(evt.zoom);
+            this.setMapObjectCenter(center, zoom, false);
+        }
+    },
 
     /**
      * Method: loadWarningMessage

lib/OpenLayers/Layer/Google/v3.js

@@ -13,7 +13,13 @@
  * 
  * Mixin providing functionality specific to the Google Maps API v3.
  * 
- * To use this layer, you must include the GMaps v3 API in your html.
+ * To use this layer, you must include the GMaps v3 API in your html. To match
+ * Google's zoom animation better with OpenLayers animated zooming, configure
+ * your map with a zoomDuration of 10:
+ *
+ * (code)
+ * new OpenLayers.Map('map', {zoomDuration: 10});
+ * (end)
  * 
  * Note that this layer configures the google.maps.map object with the
  * "disableDefaultUI" option set to true. Using UI controls that the Google

lib/OpenLayers/Map.js

@@ -82,6 +82,9 @@ OpenLayers.Map = OpenLayers.Class({
      *     zoom has changed.
      * move - triggered after each drag, pan, or zoom
      * moveend - triggered after a drag, pan, or zoom completes
+     * zoomstart - triggered when a zoom starts. Listeners receive an object
+     *     with *center* and *zoom* properties, for the target center and zoom
+     *     level.
      * zoomend - triggered after a zoom completes
      * mouseover - triggered after mouseover the map
      * mouseout - triggered after mouseout the map
@@ -2393,6 +2396,15 @@ OpenLayers.Map = OpenLayers.Class({
             if (map.baseLayer.wrapDateLine) {
                 zoom = map.adjustZoom(zoom);
             }
+            var center = xy ?
+                map.getZoomTargetCenter(xy, map.getResolutionForZoom(zoom)) :
+                map.getCenter();
+            if (center) {
+                map.events.triggerEvent('zoomstart', {
+                    center: center,
+                    zoom: zoom
+                });
+            }
             if (map.zoomTween) {
                 var currentRes = map.getResolution(),
                     targetRes = map.getResolutionForZoom(zoom),
@@ -2421,16 +2433,15 @@ OpenLayers.Map = OpenLayers.Class({
                             done: function(data) {
                                 map.applyTransform();
                                 var resolution = map.getResolution() / data.scale,
-                                    zoom = map.getZoomForResolution(resolution, true)
-                                map.moveTo(map.getZoomTargetCenter(xy, resolution), zoom, true);
+                                    newZoom = map.getZoomForResolution(resolution, true),
+                                    newCenter = data.scale === 1 ? center :
+                                            map.getZoomTargetCenter(xy, resolution);
+                                map.moveTo(newCenter, newZoom, true);
                             }
                         }
                     });
                 }
             } else {
-                var center = xy ?
-                    map.getZoomTargetCenter(xy, map.getResolutionForZoom(zoom)) :
-                    null;
                 map.setCenter(center, zoom);
             }
         }

tests/Map.html

@@ -267,14 +267,18 @@
         map.destroy();
     }
 
-    function test_Map_zoomend_event (t) {
-        t.plan(2);
+    function test_Map_zoomstart_zoomend_event (t) {
+        t.plan(4);
 
         map = new OpenLayers.Map('map', {zoomMethod: null});
         var baseLayer = new OpenLayers.Layer.WMS("Test Layer", 
             "http://octo.metacarta.com/cgi-bin/mapserv?",
             {map: "/mapdata/vmap_wms.map", layers: "basic"});
         map.addLayer(baseLayer);
+        map.events.register("zoomstart", {count: 0}, function() { 
+            this.count++; 
+            t.ok(true, "zoomstart event was triggered " + this.count + " times");
+            });
         map.events.register("zoomend", {count: 0}, function() { 
             this.count++; 
             t.ok(true, "zoomend event was triggered " + this.count + " times");