33 lines
1.2 KiB
HTML
33 lines
1.2 KiB
HTML
---
|
|
layout: example.html
|
|
title: Sea Level
|
|
shortdesc: Render sea level at different elevations
|
|
docs: >
|
|
<p>
|
|
This example uses a <code>ol/source/Raster</code> with
|
|
<a href="https://www.mapbox.com/blog/terrain-rgb/">Mapbox Terrain-RGB tiles</a>
|
|
to "flood" areas below the elevation shown on the sea level slider.
|
|
</p>
|
|
<p>
|
|
<code>ol/source/Raster</code> can take either a tile source or layer.
|
|
In this case a layer is used to allow disabling at the <code>prerender</code> event
|
|
of image smoothing which would change the precise elevation values set in the pixels.
|
|
</p>
|
|
tags: "raster, pixel operation, flood"
|
|
cloak:
|
|
- key: get_your_own_D6rA4zTHduk6KOKTXzGB
|
|
value: Get your own API key at https://www.maptiler.com/cloud/
|
|
---
|
|
<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>
|