Ways to manipulate terrain data with Tangram
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
lib
styles
LICENSE
README.md
decoder.html
decoder.js
index.html
kernel.glsl
main.js

README.md

terrain-demos

Ways to manipulate heightmap data in Tangram as seen in the Mapping Mountains post on the Mapzen blog.

terrain demo

Style gallery

Check out the source code for these and more examples in the styles directory.

Elevation tiles vs. Normal tiles alpha elevation

Mapzen offers two sources of elevation data: the "terrarium" elevation tiles, and also the alpha channel of the normal tiles. Most of the examples in this repo are based on the elevation tiles, but some of them (such as normal-alpha-elevation.yaml) use the alpha channel of the normal tiles. This source is a bit trickier to use, but if you don't need the 24-bit resolution of the elevation tiles, and are already loading the normal tiles, it will make your styles faster.

The elevation tiles use a relatively simple linear encoding, but the normal tiles alpha channel is quantized, non-linear, and 8-bit. (More information about this encoding can be found in the documentation for our elevation datasource.)

To make this source simpler to interpret, we're using a "decoder ring" image which maps the quantized range to the unquantized range as best it can. This image is generated with a piece of JavaScript which runs the quantize function in reverse, and creates a new image in a canvas element with the decoded output values for each input value. You can run this script here. This image has also been pregenerated for your convenience, and is stored in this repo as decoder.png. It looks like this:

decoder ring image

This image can be used as a texture in a heightmap shader, for easier decoding.

To run locally:

Start a web server in the repo's directory:

python -m SimpleHTTPServer 8000

If that doesn't work, try:

python -m http.server 8000

Then navigate to, eg: http://localhost:8000/?url=styles/contours.yaml