fix bug where center of fingers is not preserved on pinch zoom

lib/OpenLayers/Control/PinchZoom.js

@@ -22,10 +22,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
     type: OpenLayers.Control.TYPE_TOOL,
 
     /**
-     * Property: containerOrigin
-     * {Object} Cached object representing the layer container origin (in pixels).
+     * Property: containerCenter
+     * {Object} Cached object representing the layer container center (in pixels).
      */
-    containerOrigin: null,
+    containerCenter: null,
 
     /**
      * Property: pinchOrigin
@@ -103,14 +103,15 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
     },
     
     /**
-     * Method: updateContainerOrigin
-     * Must be called each time the layer container origin changes.
+     * Method: updateContainerCenter
+     * Must be called each time the layer container moves.
      */
     updateContainerOrigin: function() {
         var container = this.map.layerContainerDiv;
-        this.containerOrigin = {
-            x: parseInt(container.style.left, 10),
-            y: parseInt(container.style.top, 10)
+        // the layer container div is a square of 100px/100px
+        this.containerCenter = {
+            x: parseInt(container.style.left, 10) + 50,
+            y: parseInt(container.style.top, 10) + 50
         };
     },
 
@@ -137,12 +138,12 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
      */
     pinchMove: function(evt, pinchData) {
         var scale = pinchData.scale;
-        var containerOrigin = this.containerOrigin;
+        var containerCenter = this.containerCenter;
         var pinchOrigin = this.pinchOrigin;
         var current = 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));
+        var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerCenter.x - pinchOrigin.x));
+        var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerCenter.y - pinchOrigin.y));
 
         this.applyTransform(
             "translate(" + dx + "px, " + dy + "px) scale(" + scale + ")"

tests/Control/PinchZoom.html

@@ -49,7 +49,7 @@
             log.push(transform);
         }
         
-        control.containerOrigin = {
+        control.containerCenter = {
             x: 0, y: 0
         };