Limited Layer Extent

Restricting layer rendering to a limited extent.

This example uses the layer.setExtent() method to modify the extent of the overlay layer. Use the controls above to limit rendering based on an extent (approximate country bounds).

main.js

import Map from 'ol/Map.js';
import TileJSON from 'ol/source/TileJSON.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {transformExtent} from 'ol/proj.js';

function transform(extent) {
  return transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
}

const extents = {
  India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
  Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
  Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
  Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]),
};

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

const base = new TileLayer({
  source: new TileJSON({
    url:
      'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' +
      key,
    crossOrigin: 'anonymous',
  }),
});

const overlay = new TileLayer({
  extent: extents.India,
  source: new TileJSON({
    url:
      'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' +
      key,
    crossOrigin: 'anonymous',
  }),
});

const map = new Map({
  layers: [base, overlay],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 1,
  }),
});

for (const key in extents) {
  document.getElementById(key).onclick = function (event) {
    overlay.setExtent(extents[event.target.id]);
  };
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Limited Layer Extent</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button type="button" class="btn btn-light" id="India">India</button>
    <button type="button" class="btn btn-light" id="Argentina">Argentina</button>
    <button type="button" class="btn btn-light" id="Nigeria">Nigeria</button>
    <button type="button" class="btn btn-light" id="Sweden">Sweden</button>

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

package.json

{
  "name": "layer-extent",
  "dependencies": {
    "ol": "10.2.1"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}