diff --git a/examples/mousewheel-zoom.html b/examples/mousewheel-zoom.html new file mode 100644 index 0000000000..64ac29f801 --- /dev/null +++ b/examples/mousewheel-zoom.html @@ -0,0 +1,12 @@ +--- +layout: example.html +title: Mousewheel/Trackpad Zoom +shortdesc: Restrict wheel/trackpad zooming to integer zoom levels. +docs: > + By default, the `ol.interaction.MouseWheelZoom` can leave the map at + fractional zoom levels. If instead you want to constrain wheel/trackpad + zooming to integer zoom levels, set constrainResolution: true + when constructing the interaction. +tags: "trackpad, mousewheel, zoom, interaction" +--- +
diff --git a/examples/mousewheel-zoom.js b/examples/mousewheel-zoom.js new file mode 100644 index 0000000000..17f7c91af6 --- /dev/null +++ b/examples/mousewheel-zoom.js @@ -0,0 +1,25 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.interaction'); +goog.require('ol.interaction.MouseWheelZoom'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + interactions: ol.interaction.defaults({mouseWheelZoom: false}).extend([ + new ol.interaction.MouseWheelZoom({ + 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 + }) +}); diff --git a/externs/olx.js b/externs/olx.js index e359a8e484..515ed19c98 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -3087,7 +3087,8 @@ olx.interaction.ModifyOptions.prototype.wrapX; /** - * @typedef {{duration: (number|undefined), + * @typedef {{constrainResolution: (boolean|undefined), + * duration: (number|undefined), * timeout: (number|undefined), * useAnchor: (boolean|undefined)}} */ @@ -3111,7 +3112,8 @@ olx.interaction.MouseWheelZoomOptions.prototype.timeout; /** - * Zoom to the closest integer zoom level after trackpad zoom ends. Default is `false`. + * Zoom to the closest integer zoom level after the wheel/trackpad gesture ends. + * Default is `false`. * @type {boolean|undefined} * @api */