Layer Min/Max Resolution

This example uses OpenLayers v4.0.1. The latest is v.

#### Layer Min/Max Resolution

Show/hide layers depending on current view resolution.

Zoom in twice: the MapBox layer should hide and the OSM layer should be shown.

If you continue to zoom in, you'll see the OSM layer also disappear.

The rendering of the layers are here controlled using minResolution and maxResolution options.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.control
,
- ol.layer.Tile
,
- ol.source.OSM
,
- ol.source.TileJSON

Copy Edit
Layer Min/Max Resolution Show/hide layers depending on current view resolution. /** * Create the map. */ var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), minResolution: 200, maxResolution: 2000 }), new ol.layer.Tile({ source: new ol.source.TileJSON({ url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure', crossOrigin: 'anonymous' }), minResolution: 2000, maxResolution: 20000 }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: new ol.View({ center: [653600, 5723680], zoom: 5 }) }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Layer Min/Max Resolution</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/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.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <script>
          /**
           * Create the map.
           */
          var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM(),
                minResolution: 200,
                maxResolution: 2000
              }),
              new ol.layer.Tile({
                source: new ol.source.TileJSON({
                  url: 'https://api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
                  crossOrigin: 'anonymous'
                }),
                minResolution: 2000,
                maxResolution: 20000
              })
            ],
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                collapsible: false
              })
            }),
            view: new ol.View({
              center: [653600, 5723680],
              zoom: 5
            })
          });
        </script>
      </body>
    </html>