Merge pull request #6224 from aAXEe/pinZoom-allowFractionalZoom

Pinch zoom: allow fractional zoom

changelog/upgrade-notes.md

@@ -77,6 +77,19 @@ ol.proj.getPointResolution(projection, resolution, point);
 
 Note that if you were previously creating a projection with a `getPointResolution` function in the constructor (or calling `projection.setGetPointResolution()` after construction), this function will be used by `ol.proj.getPointResolution()`.
 
+#### `ol.interaction.PinchZoom` no longer zooms to a whole-number zoom level after the gesture ends
+
+The old behavior of `ol.interaction.PinchZoom` was to zoom to the next integer zoom level after the user ends the gesture.
+
+Now the pinch zoom keeps the user selected zoom level even if it is a fractional zoom.
+
+To get the old behavior set the new `constrainResolution` parameter to `true` like this:
+```js
+new ol.interaction.PinchZoom({constrainResolution: true})
+```
+
+See the new `pinchZoom` example for a complete implementation.
+
 ### v3.19.1
 
 #### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`

examples/pinchZoom.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: PinchZoom
+shortdesc: A basic example for a pinch zoom with a restriction to integer zooms.
+docs: >
+  <p>Use a pinch zoom gesture to zoom the map.
+    After the gesture the map will zoomed to the next whole-number zoom level with an animtation.</p>
+tags: "pinch, zoom, interaction"
+---
+<div id="map" class="map"></div>

examples/pinchZoom.js

@@ -0,0 +1,25 @@
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.interaction');
+goog.require('ol.interaction.PinchZoom');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.OSM');
+
+
+var map = new ol.Map({
+  interactions: ol.interaction.defaults({pinchZoom: false}).extend([
+    new ol.interaction.PinchZoom({
+      constrainResolution: true // force zooming to a integer zoom
+    })
+  ]),
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    })
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

externs/olx.js

@@ -3145,6 +3145,13 @@ olx.interaction.PinchZoomOptions;
  */
 olx.interaction.PinchZoomOptions.prototype.duration;
 
+/**
+ * Zoom to the closest integer zoom level after the pinch gesture ends. Default is `false`.
+ * @type {boolean|undefined}
+ * @api
+ */
+olx.interaction.PinchZoomOptions.prototype.constrainResolution;
+
 
 /**
  * @typedef {{handleDownEvent: (function(ol.MapBrowserPointerEvent):boolean|undefined),

src/ol/interaction/pinchzoom.js

@@ -27,6 +27,12 @@ ol.interaction.PinchZoom = function(opt_options) {
 
   var options = opt_options ? opt_options : {};
 
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.constrainResolution_ = options.constrainResolution || false;
+
   /**
    * @private
    * @type {ol.Coordinate}
@@ -111,13 +117,15 @@ ol.interaction.PinchZoom.handleUpEvent_ = function(mapBrowserEvent) {
     var map = mapBrowserEvent.map;
     var view = map.getView();
     view.setHint(ol.View.Hint.INTERACTING, -1);
-    var resolution = view.getResolution();
-    // Zoom to final resolution, with an animation, and provide a
-    // direction not to zoom out/in if user was pinching in/out.
-    // Direction is > 0 if pinching out, and < 0 if pinching in.
-    var direction = this.lastScaleDelta_ - 1;
-    ol.interaction.Interaction.zoom(map, view, resolution,
-        this.anchor_, this.duration_, direction);
+    if (this.constrainResolution_) {
+      var resolution = view.getResolution();
+      // Zoom to final resolution, with an animation, and provide a
+      // direction not to zoom out/in if user was pinching in/out.
+      // Direction is > 0 if pinching out, and < 0 if pinching in.
+      var direction = this.lastScaleDelta_ - 1;
+      ol.interaction.Interaction.zoom(map, view, resolution,
+          this.anchor_, this.duration_, direction);
+    }
     return false;
   } else {
     return true;