Skip to content
Navara

ElevationHeatmapMaterial

ElevationHeatmapMaterial holds the render options for visualizing elevation as a color-coded heatmap on a raster layer. It decodes DEM tiles and applies a colormap based on elevation values. Set it via the elevationHeatmap key.

Because it decodes DEM tiles, it requires a raster-dem source; the elevation decoder is taken from the source, not from this material.

Use Cases

Section titled “Use Cases”
  • Visually representing the elevation distribution of terrain
  • Terrain analysis and visualizing mountainous areas
  • Intuitive understanding of elevation data

Properties

Section titled “Properties”

maxHeight

Section titled “maxHeight”

Type: number | undefined — Default: 1000

Description: Maximum elevation (meters) for the colormap. Elevations above this show in the colormap’s maximum color.

{ elevationHeatmap: { maxHeight: 3000 } }

minHeight

Section titled “minHeight”

Type: number | undefined — Default: 0

Description: Minimum elevation (meters) for the colormap. Elevations at or below this show in the colormap’s minimum color.

{ elevationHeatmap: { minHeight: 0 } }

logarithmic

Section titled “logarithmic”

Type: boolean | undefined — Default: false

Description: Whether to use a logarithmic scale, making subtle elevation differences in lowland areas more visible when the low–high range is large.

{ elevationHeatmap: { logarithmic: true } }

logBoundary

Section titled “logBoundary”

Type: number | undefined — Default: 0

Description: Boundary value used as the base for logarithmic calculations when logarithmic is enabled.

{ elevationHeatmap: { logBoundary: 1000 } }

Usage Examples

Section titled “Usage Examples”

Basic usage

Section titled “Basic usage”
import ThreeView, { TERRARIUM_ELEVATION_DECODER } from "@navaramap/three";


const view = new ThreeView({ container: document.getElementById("map") });
await view.init();


const dem = view.addSource({
  type: "raster-dem",
  url: "https://example.com/terrarium/{z}/{x}/{y}.png",
  elevationDecoder: TERRARIUM_ELEVATION_DECODER(),
  maxZoom: 15,
});


view.addLayer({
  type: "raster",
  source: dem,
  elevationHeatmap: { maxHeight: 3000, minHeight: 0 },
});

Logarithmic scale

Section titled “Logarithmic scale”
view.addLayer({
  type: "raster",
  source: dem,
  elevationHeatmap: { maxHeight: 3000, minHeight: 0, logarithmic: true, logBoundary: 1000 },
});

Customizing the colormap

Section titled “Customizing the colormap”

The heatmap colors are controlled by the globe.elevationColormap property.

import ThreeView, { ColorMap, Color } from "@navaramap/three";


const view = new ThreeView();
await view.init();


// ref: https://colorbrewer2.org/#type=diverging&scheme=RdYlBu&n=11
const rdYlBuColorMap = new ColorMap("diverging", "RdYlBu", [
  new Color().setStyle("#313695"),
  new Color().setStyle("#4575b4"),
  new Color().setStyle("#74add1"),
  new Color().setStyle("#abd9e9"),
  new Color().setStyle("#e0f3f8"),
  new Color().setStyle("#ffffbf"),
  new Color().setStyle("#fee090"),
  new Color().setStyle("#fdae61"),
  new Color().setStyle("#f46d43"),
  new Color().setStyle("#d73027"),
  new Color().setStyle("#a50026"),
]);


view.globe.elevationColormap = rdYlBuColorMap;
Section titled “Related Resources”