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.

Note

Layers are added with addLayer and take a source — either a Source handle from addSource, or its id string. See Materials for the materials reference.

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

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

Layer type	Accepts sources	Render options
vector	geojson, vector-tile	point / billboard / text / polyline / polygon
raster	raster-tile, raster-dem	raster / hillshade / elevationHeatmap
terrain	raster-dem, quantized-mesh	terrain
3d-tiles	3d-tiles	model

view.addLayer({ type: "raster", source: imagery, raster: { opacity: 0.8 } });
view.addLayer({ type: "terrain", source: dem, terrain: { skirt: true } });

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();

Related Resources

• About Source — the data side
• ThreeView functions — addLayer / addSource
• Materials — materials (styling) reference