View Min-Zoom

Demonstrates how the view's minimum zoom level can be changed.

The minZoom option for a view limits how far out you can zoom. This property can be updated by calling view.setMinZoom(newMinZoom). In this example, the minimum zoom level is set so that you only see one world at a time. Resize your browser window to change the threshold.

<!DOCTYPE html>
<html>
  <head>
    <title>View Min-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="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var viewport = document.getElementById('map');

      function getMinZoom() {
        var width = viewport.clientWidth;
        return Math.ceil(Math.LOG2E * Math.log(width / 256));
      }

      var initialZoom = getMinZoom();

      var view = new ol.View({
        center: [0, 0],
        minZoom: initialZoom,
        zoom: initialZoom
      });

      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        view: view
      });

      window.addEventListener('resize', function() {
        var minZoom = getMinZoom();
        if (minZoom !== view.getMinZoom()) {
          view.setMinZoom(minZoom);
        }
      });
    </script>
  </body>
</html>