From 0a131f380a4c31308d7c53ab5ae47baaa9436ee0 Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Fri, 30 Nov 2012 13:29:12 +0100 Subject: [PATCH 1/5] Adding preserveCenter config option --- examples/mobile.js | 3 +++ lib/OpenLayers/Control/PinchZoom.js | 15 ++++++++++++--- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/examples/mobile.js b/examples/mobile.js index 9bbcb9125a..3104cbbd63 100644 --- a/examples/mobile.js +++ b/examples/mobile.js @@ -22,6 +22,9 @@ var init = function () { controls: [ new OpenLayers.Control.Attribution(), new OpenLayers.Control.TouchNavigation({ + pinchZoomOptions: { + preserveCenter: true + }, dragPanOptions: { enableKinetic: true } diff --git a/lib/OpenLayers/Control/PinchZoom.js b/lib/OpenLayers/Control/PinchZoom.js index b3691d813b..e89fa287f6 100644 --- a/lib/OpenLayers/Control/PinchZoom.js +++ b/lib/OpenLayers/Control/PinchZoom.js @@ -40,6 +40,12 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, { * true. */ autoActivate: true, + + /** + * APIProperty: preserveCenter + * {Boolean} Force the map center to stay in place. Default is false. + */ + preserveCenter: false, /** * APIProperty: handlerOptions @@ -73,8 +79,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 +97,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)); From 00c3ca47c0bc4df5ce869766d676440a23b7e2a8 Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Mon, 3 Dec 2012 15:25:31 +0100 Subject: [PATCH 2/5] Adding test for new preserveCenter option --- tests/Control/PinchZoom.html | 47 ++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/tests/Control/PinchZoom.html b/tests/Control/PinchZoom.html index 788642d3da..9fc4a189b6 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(); + + 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 From 69580cd6981ef0eadc00dd4f4f744359168584c6 Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Mon, 17 Dec 2012 12:56:09 +0100 Subject: [PATCH 3/5] Don't change the example --- examples/mobile.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/examples/mobile.js b/examples/mobile.js index 3104cbbd63..9bbcb9125a 100644 --- a/examples/mobile.js +++ b/examples/mobile.js @@ -22,9 +22,6 @@ var init = function () { controls: [ new OpenLayers.Control.Attribution(), new OpenLayers.Control.TouchNavigation({ - pinchZoomOptions: { - preserveCenter: true - }, dragPanOptions: { enableKinetic: true } From 06597f1897e565f3610243eefde90f5b38a0378b Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Mon, 17 Dec 2012 13:23:10 +0100 Subject: [PATCH 4/5] Missing var --- tests/Control/PinchZoom.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/Control/PinchZoom.html b/tests/Control/PinchZoom.html index 9fc4a189b6..1aa68f9c04 100644 --- a/tests/Control/PinchZoom.html +++ b/tests/Control/PinchZoom.html @@ -92,7 +92,7 @@ }); map.zoomToMaxExtent(); - centerPx = map.getPixelFromLonLat(map.getCenter()); + var centerPx = map.getPixelFromLonLat(map.getCenter()); control.pinchStart = function(evt, pinchData) { t.eq(control.pinchOrigin, centerPx, "center preserved"); From d0c85850f5b21c83caaf642cbab8fdc32a9e00f2 Mon Sep 17 00:00:00 2001 From: Pierre GIRAUD Date: Mon, 17 Dec 2012 13:34:00 +0100 Subject: [PATCH 5/5] More detailed documentation --- lib/OpenLayers/Control/PinchZoom.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/OpenLayers/Control/PinchZoom.js b/lib/OpenLayers/Control/PinchZoom.js index e89fa287f6..f55d08e9fc 100644 --- a/lib/OpenLayers/Control/PinchZoom.js +++ b/lib/OpenLayers/Control/PinchZoom.js @@ -43,7 +43,12 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, { /** * APIProperty: preserveCenter - * {Boolean} Force the map center to stay in place. Default is false. + * {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,