Edit

Limited Layer Extent

extent4 tilejson5

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 'ol/ol.css';
import Map from 'ol/Map';
import TileJSON from 'ol/source/TileJSON';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {transformExtent} from 'ol/proj';

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>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button type="button" class="btn btn-default" id="India">India</button>
    <button type="button" class="btn btn-default" id="Argentina">Argentina</button>
    <button type="button" class="btn btn-default" id="Nigeria">Nigeria</button>
    <button type="button" class="btn btn-default" id="Sweden">Sweden</button>
    <script src="main.js"></script>
  </body>
</html>
package.json
{
  "name": "layer-extent",
  "dependencies": {
    "ol": "6.6.1"
  },
  "devDependencies": {
    "parcel": "^2.0.0-beta.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  }
}