Pinch Zoom

Restrict pinch zooming to integer zoom levels.

By default, the ol.interaction.PinchZoom can leave the map at fractional zoom levels. If instead you want to constrain pinch zooming to integer zoom levels, set constrainResolution: true when constructing the interaction.

<!DOCTYPE html>
<html>
  <head>
    <title>Pinch Zoom</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=""></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      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
        })
      });
    </script>
  </body>
</html>