Render sea level at different elevations
This example uses a ol/source/Raster
with
Mapbox Terrain-RGB tiles
to "flood" areas below the elevation shown on the sea level slider.
ol/source/Raster
can take either a tile source or layer.
In this case a layer is used to allow disabling at the prerender
event
of image smoothing which would change the precise elevation values set in the pixels.
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer';
import {Raster as RasterSource, XYZ} from 'ol/source';
import {fromLonLat} from 'ol/proj';
function flood(pixels, data) {
var pixel = pixels[0];
if (pixel[3]) {
var height =
-10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
if (height <= data.level) {
pixel[0] = 134;
pixel[1] = 203;
pixel[2] = 249;
pixel[3] = 255;
} else {
pixel[3] = 0;
}
}
return pixel;
}
var key = 'Get your own API key at https://www.maptiler.com/cloud/';
var attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>';
var elevation = new TileLayer({
source: new XYZ({
url:
'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
maxZoom: 10,
crossOrigin: '',
}),
});
elevation.on('prerender', function (evt) {
evt.context.imageSmoothingEnabled = false;
evt.context.msImageSmoothingEnabled = false;
});
var raster = new RasterSource({
sources: [elevation],
operation: flood,
});
var map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
tileSize: 512,
}),
}),
new ImageLayer({
opacity: 0.6,
source: raster,
}) ],
view: new View({
center: fromLonLat([-122.3267, 37.8377]),
zoom: 11,
}),
});
var control = document.getElementById('level');
var output = document.getElementById('output');
control.addEventListener('input', function () {
output.innerText = control.value;
raster.changed();
});
output.innerText = control.value;
raster.on('beforeoperations', function (event) {
event.data.level = control.value;
});
var locations = document.getElementsByClassName('location');
for (var i = 0, ii = locations.length; i < ii; ++i) {
locations[i].addEventListener('click', relocate);
}
function relocate(event) {
var data = event.target.dataset;
var view = map.getView();
view.setCenter(fromLonLat(data.center.split(',').map(Number)));
view.setZoom(Number(data.zoom));
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sea Level</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;
}
#level {
display: inline-block;
width: 150px;
vertical-align: text-bottom;
}
a.location {
cursor: pointer;
}
#map {
background: #85ccf9;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<label>
Sea level
<input id="level" type="range" min="0" max="100" value="1"/>
+<span id="output"></span> m
</label>
<br>
Go to
<a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
<a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
<a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
<a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>
<script src="main.js"></script>
</body>
</html>
{
"name": "sea-level",
"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"
}
}