Layer Min/Max Resolution

minResolution 1 maxResolution 1 resolution 1

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.

main.js

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileJSON from 'ol/source/TileJSON.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';

const key =
  'Your Mapbox access token from https://mapbox.com/ here';

/**
 * Create the map.
 */
const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
      minResolution: 200,
      maxResolution: 2000,
    }),
    new TileLayer({
      source: new TileJSON({
        url:
          'https://api.tiles.mapbox.com/v4/mapbox.natural-earth-hypso-bathy.json?secure&access_token=' +
          key,
        crossOrigin: 'anonymous',
      }),
      minResolution: 2000,
      maxResolution: 20000,
    }),
  ],
  target: 'map',
  view: new View({
    center: [653600, 5723680],
    zoom: 5,
  }),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Layer Min/Max Resolution</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "min-max-resolution",
  "dependencies": {
    "ol": "9.1.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}