Skip to content

Layer Types

A layer decides how map data is rendered. The data itself comes from a Source, which a layer references by source. Separating “where the data is” (Source) from “how it looks” (layer) lets one source feed several layers, restyle without re-fetching, and describe a whole map declaratively from JSON.

Creating a layer

Section titled “Creating a layer”
import ThreeView from "@navaramap/three";


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


// Reference the source by handle…
view.addLayer({ type: "raster", source: imagery });


// …or by id
view.addLayer({ type: "raster", source: "basemap" });

addLayer returns a Layer handle with update(), delete(), forceUpdate(), and feature events.

Layer types

Section titled “Layer types”

Each layer type accepts a specific set of source types and its own set of nested render options (materials):

Layer typeAccepts sourcesRender options
vectorgeojson, vector-tilepoint / billboard / text / polyline / polygon
rasterraster-tile, raster-demraster / hillshade / elevationHeatmap
terrainraster-dem, quantized-meshterrain
3d-tiles3d-tilesmodel
view.addLayer({ type: "raster", source: imagery, raster: { opacity: 0.8 } });
view.addLayer({ type: "terrain", source: dem, terrain: { skirt: true } });

Updating and deleting

Section titled “Updating and deleting”

The returned Layer handle overwrites its configuration with update() and removes the layer with delete(). Passing a different source in the update payload re-points the layer at that source, rebuilding it against the new source (the source must already be registered. An unknown source id is ignored, so the rest of the update still applies). Terrain layers support both: delete() removes the terrain and the globe falls back to the flat ellipsoid.

const layer = view.addLayer({ type: "raster", source: imagery });
layer.update({ type: "raster", source: imagery, raster: { opacity: 0.5 } });
layer.delete();
Section titled “Related Resources”