--- 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 case 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.

tags: "webgl, math, flood" cloak: - key: get_your_own_D6rA4zTHduk6KOKTXzGB value: Get your own API key at https://www.maptiler.com/cloud/ ---

Go to San Francisco, New York, Mumbai, or Shanghai