diff --git a/examples/spherical-mercator.html b/examples/spherical-mercator.html
index 443ba3bb86..5782434f3d 100644
--- a/examples/spherical-mercator.html
+++ b/examples/spherical-mercator.html
@@ -54,7 +54,9 @@
OpenLayers Spherical Mercator Example
div: "map",
projection: "EPSG:900913",
displayProjection: "EPSG:4326",
- numZoomLevels: 18
+ numZoomLevels: 18,
+ // approximately match Google's zoom animation
+ zoomDuration: 10
});
// create Google Mercator layers
diff --git a/lib/OpenLayers/Layer/EventPane.js b/lib/OpenLayers/Layer/EventPane.js
index 15a852fb6d..591ab6f3ee 100644
--- a/lib/OpenLayers/Layer/EventPane.js
+++ b/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 - {}
*/
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
diff --git a/lib/OpenLayers/Layer/Google/v3.js b/lib/OpenLayers/Layer/Google/v3.js
index 067b7a08fc..b8e04588cc 100644
--- a/lib/OpenLayers/Layer/Google/v3.js
+++ b/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
diff --git a/lib/OpenLayers/Map.js b/lib/OpenLayers/Map.js
index 11b2b37021..99e63584db 100644
--- a/lib/OpenLayers/Map.js
+++ b/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
+ * leve.
* 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),
@@ -2428,9 +2440,6 @@ OpenLayers.Map = OpenLayers.Class({
});
}
} else {
- var center = xy ?
- map.getZoomTargetCenter(xy, map.getResolutionForZoom(zoom)) :
- null;
map.setCenter(center, zoom);
}
}
diff --git a/tests/Map.html b/tests/Map.html
index 9693fb1bc2..537ecdd43f 100644
--- a/tests/Map.html
+++ b/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");