38 lines
1.8 KiB
HTML
38 lines
1.8 KiB
HTML
---
|
|
layout: example.html
|
|
title: Sea Level (with WebGL)
|
|
shortdesc: Render sea level at different elevations
|
|
docs: >
|
|
<p>
|
|
The <code>style</code> property of a WebGL tile layer accepts a <code>color</code> expression that
|
|
can be used to modify pixel values before rendering. Here, RGB tiles representing elevation
|
|
data are loaded and rendered so that values at or below sea level are blue, and values
|
|
above sea level are transparent. The <code>color</code> expression operates on normalized pixel
|
|
values ranging from 0 to 1. The <code>band</code> operator is used to select normalized values
|
|
from a single band.
|
|
</p><p>
|
|
After converting the normalized RGB values to elevation, the <code>interpolate</code> expression
|
|
is used to pick colors to apply at a given elevation. Instead of using constant
|
|
numeric values as the stops in the colors array, the <code>var</code> operator allows you to
|
|
use a value that can be modified by your application. When the user drags the
|
|
sea level slider, the <code>layer.updateStyleVariables()</code> function is called to update
|
|
the <code>level</code> style variable with the value from the slider.
|
|
</p>
|
|
tags: "webgl, math, 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>
|