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).
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');
}
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]);
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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>
{
"name": "layer-extent",
"dependencies": {
"ol": "6.4.3"
},
"devDependencies": {
"parcel": "1.11.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --experimental-scope-hoisting --public-url . index.html"
}
}