Aggregation layers: hexagons and heatmaps
Quick answer
This tutorial explains that HexagonLayer and HeatmapLayer bin raw points on the GPU before coloring, and why radius and cellSize are measured in meters while radiusPixels is in screen pixels. It configures getColorWeight, colorAggregation, coverage, extruded, elevationScale and colorDomain, then combines a HeatmapLayer at low zoom with a HexagonLayer when zoomed in. Readers can pick the right density encoding and tune it.
Key points
- Set radius and cellSize in meters; only HeatmapLayer radiusPixels is screen-based.
- Use getColorWeight with colorAggregation SUM and colorDomain for fixed thresholds.
- Toggle a heat and a hexagon layer with visible instead of rendering both at once.
Example
var hexagon = new deck.HexagonLayer({
id: 'density-hex',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getColorWeight: function (d) { return d.flow; },
colorAggregation: 'SUM',
radius: 900,
coverage: 0.92,
extruded: true,
elevationScale: 12,
elevationRange: [0, 3000],
colorRange: [
[255, 245, 200],
[255, 210, 120],
[255, 160, 60],
[240, 100, 40],
[190, 40, 60]
],
pickable: true,
autoHighlight: true
});var heat = new deck.HeatmapLayer({
id: 'density-heat',
data: stations,
getPosition: function (d) { return [d.lng, d.lat]; },
getWeight: function (d) { return d.flow; },
radiusPixels: 42,
intensity: 1.4,
threshold: 0.06,
colorRange: [
[0, 0, 255, 0],
[0, 128, 255, 120],
[0, 255, 200, 180],
[255, 220, 0, 220],
[255, 80, 0, 255]
],
aggregation: 'SUM'
});Notes
- Aggregated cells are not individual features; the original points sit in info.object.points.
- A missing weight field silently counts as 1, so the weighting appears to do nothing.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Aggregation layers: hexagons and heatmaps. https://www.jingweizhi.com/en/deckgl/tutorials/aggregation.html (accessed 2026-11-03).