AnimatedHexagonLayer

The AnimatedHexagonLayer renders temporal point data as an animated, extruded hexbin — the discrete, pickable analog of the smooth AnimatedHeatmapLayer. It is a composite over the canonical deck.gl HexagonLayer (@deck.gl/aggregation-layers): instead of splatting points into a density texture, every visible point is binned into hexagonal cells at runtime (on the GPU by default), and each cell is coloured — and optionally extruded — by its aggregated weight, giving the iconic deck.gl hexagon look.

Data feed. The point feed is identical to AnimatedHeatmapLayer: every visible tile's points are consolidated into one binary buffer set, cached by the visible-tile-set key so it rebuilds only when that set (or the weight config) changes, never per frame. The single consolidated weight buffer is aliased to both of HexagonLayer's weight accessors (getColorWeight and getElevationWeight), so one weight column drives both colour and elevation.

Time animation. The canonical HexagonLayer has no notion of time, so the window is driven by @deck.gl/extensions' DataFilterExtension: each point carries its start time as getFilterValue, and the filterRange (the window around the play head) is recomputed each render. Cells genuinely appear, disappear and re-colour as the window slides — the bin sorter re-runs, it is not a cross-fade. The re-aggregation cadence is capped at ~30 Hz, independently of tile loading. Because DataFilterExtension is a GPU-shader construct, the window only works on the GPU aggregation path.

It extends SpatioTemporalLayer and reuses all of its archive/tileset plumbing.

Installation#

import { AnimatedHexagonLayer } from '@poopdeck.gl/layers';

Usage#

import { AnimatedHexagonLayer } from '@poopdeck.gl/layers';

const layer = new AnimatedHexagonLayer({
  id: 'pickup-hexbin',
  data: '/data/nyc-taxi/manifest.json',
  currentTime,
  timeWindow: 30 * 60 * 1000, // 30 min window around the play head
  radius: 500, // hex bin radius, meters
  extruded: true,
  elevationScale: 20,
  elevationRange: [0, 3000],
  weightProperty: 'passengers', // unset → a pure COUNT hexbin
  hexagonAggregation: 'SUM',
});

Pair it with a raw-tier layer for a zoom-dependent stack, or use any animated layer with tier: 'auto' (the base default) to dispatch tiers automatically.

Properties#

Inherits all properties from SpatioTemporalLayer.

Binning#

Colour#

Elevation#

Aggregation#

Weight column#

The weight is a baked property-column name (not a per-feature function accessor — binary tiles cannot run per-feature JS; a function-valued alias warns once and falls back). One weight column drives both colour and elevation.

Behavior notes#

• Picking: pickable is inherited, like every sibling STT layer — pass pickable: true to pick cells. Discrete cells have feature identity to pick, unlike the heatmap's density pixels, which are forced non-pickable.
• The sublayer short id for _subLayerProps overrides is hexbin: _subLayerProps: { hexbin: { type: MyLayer, ... } } swaps the sublayer class or overrides sublayer props.

Source#

packages/layers/src/layers/summary/animated-hexagon-layer.ts