terrain-demos

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

Style gallery

• elevation tiles: http://tangrams.github.io/terrain-demos/?url=styles/elevation-tiles.yaml
• basic green: http://tangrams.github.io/terrain-demos/?url=styles/green.yaml
• animated contours: http://tangrams.github.io/terrain-demos/?url=styles/contours.yaml
• grayscale hypsometric: http://tangrams.github.io/terrain-demos/?url=styles/grayscale.yaml
• classic hypsometric: http://tangrams.github.io/terrain-demos/?url=styles/hypsometric.yaml
• slopemap: http://tangrams.github.io/terrain-demos/?url=styles/slope.yaml
• heightmap: http://tangrams.github.io/terrain-demos/?url=styles/heightmap.yaml
• manual normal derivation: http://tangrams.github.io/terrain-demos/?url=styles/normals-manual.yaml
• normal tiles: http://tangrams.github.io/terrain-demos/?url=styles/normals-tiles.yaml
• single light: http://tangrams.github.io/terrain-demos/?url=styles/single-light.yaml
• two lights: http://tangrams.github.io/terrain-demos/?url=styles/two-lights.yaml
• three lights: http://tangrams.github.io/terrain-demos/?url=styles/three-lights.yaml
• environment map: http://tangrams.github.io/terrain-demos/?url=styles/environment-map1.yaml
• metal spheremap: http://tangrams.github.io/terrain-demos/?url=styles/metal.yaml
• sunrise spheremap: http://tangrams.github.io/terrain-demos/?url=styles/sunrise.yaml
• sunset spheremap: http://tangrams.github.io/terrain-demos/?url=styles/sunset.yaml
• swiss style: http://tangrams.github.io/terrain-demos/?url=styles/imhof.yaml

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:

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