Skip to main content

PathMarkerLayer

Create directional markers along a path (arrows by default) while reusing the PathOutlineLayer halo renderer. The layer is useful for visualizing traffic flow, transit routes, or any polyline where the travel direction matters. Marker placement is resolved from projected screen-space path length, and the default marker renderer uses pixel-sized triangle arrows so they remain legible while zooming.

See the path outline, marker, and dependency arrow example for a live walkthrough.

Usage​

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

const layer = new PathMarkerLayer({
  id: 'transit-routes',
  data: routes,
  widthUnits: 'pixels',
  widthScale: 10,
  getPath: (d) => d.path,
  getColor: (d) => d.color,
  getDirection: () => ({forward: true, backward: false}),
  getMarkerColor: (d) => d.markerColor,
  getMarkerPercentages: (object, {lineLength}) =>
    lineLength > 800 ? [0.2, 0.5, 0.8] : [0.5]
});

PathMarkerLayer inherits every property from PathOutlineLayer (which itself inherits from deck.gl's PathLayer) and adds the options below to control the marker pass.

Properties​

getDirection (function, optional)​

Accessor that returns an object describing which direction(s) to render markers. The object supports forward and backward boolean flags. When omitted the layer reads object.direction or defaults to {forward: true, backward: false}.

getMarkerColor (function, optional)​

Accessor that returns the RGBA color of each marker. Defaults to [0, 0, 0, 255].

getMarkerOutlineColor (function, optional)​

Accessor that returns the RGBA color of the marker halo rendered underneath the default marker layer. Defaults to [255, 255, 255, 220].

getMarkerPercentages (function, optional)​

Controls where markers are placed along each path. The accessor receives the object and a context object {lineLength} measured in screen pixels. Return an array of numbers between 0 and 1, representing the percentage along the polyline from the start vertex. The default accessor places three markers at 25, 50, and 75 percent for longer paths and a single marker at the midpoint for shorter ones.

getMarkerSize (number[] | function, optional)​

Accessor returning the default marker size in local [length, width] units. The result is multiplied by sizeScale. Defaults to [0.28, 0.18], which gives roughly 28 by 18 pixel arrows with the default sizeScale: 100. The default marker renderer centers the arrow on each placement and uses an arrow-shaped halo so the path clears around the marker without oversized front or tail gaps.

highlightPoint ([number, number] | [number, number, number], optional)​

Geographic position used to highlight the closest point on the selected path. Requires highlightIndex to reference the matching object in data. When both are provided the layer renders a small ScatterplotLayer dot at the nearest point along the polyline. Defaults to null.

highlightIndex (number, optional)​

Index of the path to inspect when highlightPoint is provided. Defaults to -1 (no highlight).

MarkerLayer (Layer, optional)​

Layer class used to render each marker. Defaults to the package's internal pixel-sized triangle marker layer. Supply your own layer (for example, IconLayer or SimpleMeshLayer) to change the marker geometry.

markerLayerProps (object, optional)​

Static props merged into the MarkerLayer constructor. Override this to adjust orientation, lighting, or other per-layer options. Dynamic props can also be supplied via updateTriggers on the composite layer.

markerOutlineWidthScale (number, optional)​

Scale applied to the default marker halo relative to sizeScale. Defaults to 1.2. Set to 1 to disable the halo.

sizeScale (number, optional)​

Scale applied to the marker geometry. Defaults to 100.

fp64 (boolean, optional)​

Enable 64-bit precision for the underlying marker layer. Defaults to false.

nebulaLayer (Layer, optional)​

Legacy escape hatch carried over from the nebula.gl version of this layer. Most applications can ignore it; when provided the instance will be reused instead of creating a new MarkerLayer.

Sublayers​

PathMarkerLayer renders up to four sublayers:

  1. A PathOutlineLayer to draw the base stroke and halo.
  2. An optional marker halo layer when the default marker renderer is used.
  3. A marker layer positioned at the percentages returned by getMarkerPercentages.
  4. A ScatterplotLayer that marks the closest point to highlightPoint when highlighting is enabled.

Because the outline already renders the base path, disable picking on the marker layer if you only want to interact with the path geometry. The composite layer's getPickingInfo helper also forwards the picked object from the outline so tool tips receive the original data object instead of the generated marker vertices. Generated marker rows include position, angle, source, target, and percentage fields so custom marker layers can choose either legacy position/orientation props or segment-based rendering.