diff --git a/examples/pinchZoom.html b/examples/pinchZoom.html new file mode 100644 index 0000000000..d7056048a1 --- /dev/null +++ b/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: > +
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.
+tags: "pinch, zoom, interaction" +--- + diff --git a/examples/pinchZoom.js b/examples/pinchZoom.js new file mode 100644 index 0000000000..5e3227f167 --- /dev/null +++ b/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 + }) +});