diff --git a/lib/OpenLayers/Control/PinchZoom.js b/lib/OpenLayers/Control/PinchZoom.js index b3691d813b..f55d08e9fc 100644 --- a/lib/OpenLayers/Control/PinchZoom.js +++ b/lib/OpenLayers/Control/PinchZoom.js @@ -40,6 +40,17 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, { * true. */ autoActivate: true, + + /** + * APIProperty: preserveCenter + * {Boolean} Set this to true if you don't want the map center to change + * while pinching. For example you may want to set preserveCenter to + * true when the user location is being watched and you want to preserve + * the user location at the center of the map even if he zooms in or + * out using pinch. This property's value can be changed any time on an + * existing instance. Default is false. + */ + preserveCenter: false, /** * APIProperty: handlerOptions @@ -73,8 +84,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, { * of the pinch gesture. This give us the current scale of the pinch. */ pinchStart: function(evt, pinchData) { - this.pinchOrigin = evt.xy; - this.currentCenter = evt.xy; + var xy = (this.preserveCenter) ? + this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy; + this.pinchOrigin = xy; + this.currentCenter = xy; }, /** @@ -89,7 +102,8 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, { var scale = pinchData.scale; var containerOrigin = this.map.layerContainerOriginPx; var pinchOrigin = this.pinchOrigin; - var current = evt.xy; + var current = (this.preserveCenter) ? + this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy; var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x)); var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y)); diff --git a/tests/Control/PinchZoom.html b/tests/Control/PinchZoom.html index 788642d3da..1aa68f9c04 100644 --- a/tests/Control/PinchZoom.html +++ b/tests/Control/PinchZoom.html @@ -79,6 +79,53 @@ } + function test_pinchMove_preservecenter(t) { + + var control = new OpenLayers.Control.PinchZoom({ + preserveCenter: true + }); + + var map = new OpenLayers.Map({ + div: "map", + controls: [control], + layers: [new OpenLayers.Layer('fake', {isBaseLayer: true})] + }); + map.zoomToMaxExtent(); + + var centerPx = map.getPixelFromLonLat(map.getCenter()); + + control.pinchStart = function(evt, pinchData) { + t.eq(control.pinchOrigin, centerPx, "center preserved"); + t.eq(control.currentCenter, centerPx, "center preserved"); + } + + control.pinchStart(null); + + var log = []; + control.applyTransform = function(transform) { + log.push(transform); + } + control.pinchOrigin = map.getPixelFromLonLat(map.getCenter()); + + var cases = [ + {scale: 1, transform: "translate(0px, 0px) scale(1)"}, + {scale: 2, transform: "translate(-128px, -128px) scale(2)"}, + {scale: 2.5, transform: "translate(-192px, -192px) scale(2.5)"}, + {scale: 0.25, transform: "translate(96px, 96px) scale(0.25)"} + ]; + + var len = cases.length; + t.plan(2 + len*2); + + var c; + for (var i=0; i