Skip to main content
WebGPUpartial

MarkerLayer

MarkerLayer renders a packed atlas of 32×32 SVG-inspired glyphs on top of Deck.gl's IconLayer. It is reused by ZoomableMarkerLayer for marker-based graph nodes and exposes simple accessors for marker name, color, and size.

Usage​

import {MarkerLayer} from '@deck.gl-community/graph-layers';

const layer = new MarkerLayer({
  id: 'markers',
  data: nodes,
  getPosition: (node) => node.position,
  getMarker: (node) => node.markerName,
  getColor: (node) => node.color,
  getSize: (node) => node.size
});

Markers are looked up in the bundled atlas and mapping generated by the scripts/packing.sh build step. The atlas ships with dozens of glyphs, including common shapes (circle, triangle-up, diamond, etc.) and UI metaphors (pin, star, bookmark).

Properties​

MarkerLayer inherits all Deck.gl IconLayer props. Custom accessors include:

getMarker (function, optional)​

Returns the atlas key for each datum. Defaults to d => d.marker.

getColor (function or array, optional)​

RGBA color accessor forwarded to the sublayer. Defaults to [0, 0, 0].

getSize (function or number, optional)​

Marker size in pixels. Defaults to 10.

data (array, optional)​

Collection of marker data. Defaults to an empty array.

Marker names​

Use the public Marker type to check names against the bundled atlas:

import type {Marker} from '@deck.gl-community/graph-layers';

const marker: Marker = 'pin-filled';

Marker is a TypeScript union, not a runtime list of names.

The MarkerLayer example shows colored city markers and hover labels. Its source uses the local graph-layers workspace for both standard and local development.