Raster Layer

A raster layer renders a raster-tile source as imagery, or a raster-dem source as hillshade or an elevation heatmap. When a terrain layer is present, the imagery is draped onto the 3D surface; otherwise it renders on the flat globe.

Properties

Property	Type	Description
type	"raster"	Layer type (required).
source	Source | string	The raster-tile or raster-dem source (required).

Render options

Material	Config key	Description
RasterMaterial	raster	Imagery appearance (color, opacity, …).
HillshadeMaterial	hillshade	Shaded relief from a raster-dem source.
ElevationHeatmapMaterial	elevationHeatmap	Color-coded elevation from a raster-dem source.

Note

hillshade and elevationHeatmap decode DEM tiles, so they require a raster-dem source. The elevation decoder is taken from the source (raster-dem’s elevationDecoder), not from the render options.

Examples

Imagery

import ThreeView from "@navaramap/three";

const view = new ThreeView(/* options */);
await view.init();

const imagery = view.addSource({
  type: "raster-tile",
  url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
  maxZoom: 19,
});

view.addLayer({ type: "raster", source: imagery, raster: { opacity: 1 } });

Hillshade

Reference a raster-dem source; the decoder lives on the source.

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

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

view.addLayer({
  type: "raster",
  source: dem,
  hillshade: { exaggeration: 0.5 },
});

Elevation heatmap

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

Related Resources

• Raster Tile Source / Raster DEM Source
• RasterMaterial / HillshadeMaterial / ElevationHeatmapMaterial
• Terrain Layer — drape imagery onto 3D terrain