| 1 | ---
|
| 2 | layout: example.html
|
| 3 | title: Sea Level
|
| 4 | shortdesc: Render sea level at different elevations
|
| 5 | docs: >
|
| 6 | <p>
|
| 7 | This example uses a <code>ol.source.Raster</code> with
|
| 8 | <a href="https://www.mapbox.com/blog/terrain-rgb/">Mapbox Terrain-RGB tiles</a>
|
| 9 | to "flood" areas below the elevation shown on the sea level slider.
|
| 10 | </p>
|
| 11 | tags: "raster, pixel operation, flood"
|
| 12 | cloak:
|
| 13 | pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg: Your Mapbox access token from http://mapbox.com/ here
|
| 14 | ---
|
| 15 | <div id="map" class="map"></div>
|
| 16 | <label>
|
| 17 | Sea level
|
| 18 | <input id="level" type="range" min="0" max="100" value="1"/>
|
| 19 | +<span id="output"></span> m
|
| 20 | </label>
|
| 21 | <br>
|
| 22 | Go to
|
| 23 | <a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
|
| 24 | <a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
|
| 25 | <a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
|
| 26 | <a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>
|