--- layout: example.html title: Sea Level (with WebGL) shortdesc: Render sea level at different elevations docs: >
The style
property of a WebGL tile layer accepts a color
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 color
expression operates on normalized pixel
values ranging from 0 to 1. The band
operator is used to select normalized values
from a single band.
After converting the normalized RGB values to elevation, the interpolate
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 var
operator allows you to
use a value that can be modified by your application. When the user drags the
sea level slider, the layer.updateStyleVariables()
function is called to update
the level
style variable with the value from the slider.