Limited Layer Extent

Edit

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).

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Limited Layer Extent</title>
    <!-- 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>
    <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="index.js"></script>
  </body>
</html>

Copy

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

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

var 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])
};

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

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

var 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'
  })
});

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

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

Copy

package.json{
  "name": "layer-extent",
  "dependencies": {
    "ol": "6.1.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}