diff --git a/examples/spherical-mercator.html b/examples/spherical-mercator.html index 443ba3bb86a..5782434f3d6 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 15a852fb6d8..591ab6f3ee3 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 067b7a08fc0..b8e04588cc7 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 11b2b370215..0978691eedf 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 + * 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); } } diff --git a/tests/Map.html b/tests/Map.html index 9693fb1bc26..537ecdd43f3 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");