Data aggregation and density visualization layers including grid-based aggregation, hexagonal binning, and heat maps.
Aggregates data into rectangular grid cells and visualizes as 3D columns.
class GridLayer extends CompositeLayer {
constructor(props: GridLayerProps);
}
interface GridLayerProps extends CompositeLayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Weight accessor for aggregation */
getWeight?: Accessor<number>;
/** Color weight accessor */
getColorWeight?: Accessor<number>;
/** Elevation weight accessor */
getElevationWeight?: Accessor<number>;
/** Grid cell size in meters */
cellSize?: number;
/** Color range for value mapping */
colorRange?: Color[];
/** Coverage ratio (0-1) */
coverage?: number;
/** Elevation scale factor */
elevationScale?: number;
/** Elevation range */
elevationRange?: [number, number];
/** Enable 3D extrusion */\n extruded?: boolean;
/** Aggregation operation */
aggregation?: 'SUM' | 'MEAN' | 'MIN' | 'MAX' | 'COUNT';
/** Material properties */
material?: Material;
/** Grid origin offset */
gridOrigin?: [number, number];
/** Grid aggregator instance */
gridAggregator?: any;
}Aggregates data into hexagonal cells for more natural spatial distribution.
class HexagonLayer extends CompositeLayer {
constructor(props: HexagonLayerProps);
}
interface HexagonLayerProps extends CompositeLayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Color weight accessor */
getColorWeight?: Accessor<number>;
/** Elevation weight accessor */
getElevationWeight?: Accessor<number>;
/** Hexagon radius in meters */
radius?: number;
/** Color range */
colorRange?: Color[];
/** Coverage ratio */
coverage?: number;
/** Elevation scale */
elevationScale?: number;
/** Elevation range */
elevationRange?: [number, number];
/** Enable 3D extrusion */
extruded?: boolean;
/** Aggregation operation */
aggregation?: 'SUM' | 'MEAN' | 'MIN' | 'MAX' | 'COUNT';
/** Upper percentile for color/elevation */
upperPercentile?: number;
/** Lower percentile for color/elevation */
lowerPercentile?: number;
/** Material properties */
material?: Material;
}Creates smooth density visualization using WebGL for high performance.
class HeatmapLayer extends Layer {
constructor(props: HeatmapLayerProps);
}
interface HeatmapLayerProps extends LayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Weight accessor */
getWeight?: Accessor<number>;
/** Heat map radius in pixels */
radiusPixels?: number;
/** Color range for heat map */
colorRange?: Color[];
/** Intensity scaling factor */
intensity?: number;
/** Intensity threshold (0-1) */
threshold?: number;
/** Color domain for mapping */
colorDomain?: [number, number];
/** Aggregation operation */
aggregation?: 'SUM' | 'MEAN';
/** Texture size for rendering */
textureSize?: number;
/** Debounce timeout for updates */
debounceTimeout?: number;
}Renders contour lines and filled contours from point data.
class ContourLayer extends CompositeLayer {
constructor(props: ContourLayerProps);
}
interface ContourLayerProps extends CompositeLayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Weight accessor */
getWeight?: Accessor<number>;
/** Grid cell size */
cellSize?: number;
/** Contour thresholds */
contours: ContourThreshold[];
/** Aggregation operation */
aggregation?: 'SUM' | 'MEAN' | 'MAX';
/** Z offset for contour lines */
zOffset?: number;
/** Stroke width for contour lines */
strokeWidth?: number;
/** Grid bounds */
gridOrigin?: [number, number];
/** Grid size */
gridSize?: [number, number];
}
interface ContourThreshold {
/** Threshold value */
threshold: number;
/** Line color */
color?: Color;
/** Stroke width */
strokeWidth?: number;
/** Z offset */
zIndex?: number;
}Aggregates data into screen-space grid for viewport-dependent analysis.
class ScreenGridLayer extends CompositeLayer {
constructor(props: ScreenGridLayerProps);
}
interface ScreenGridLayerProps extends CompositeLayerProps {
/** Position accessor */
getPosition: Accessor<Position>;
/** Weight accessor */
getWeight?: Accessor<number>;
/** Grid cell size in pixels */
cellSizePixels?: number;
/** Color range */
colorRange?: Color[];
/** Minimum color value */
minColor?: Color;
/** Maximum color value */
maxColor?: Color;
/** Aggregation operation */
aggregation?: 'SUM' | 'MEAN' | 'MIN' | 'MAX' | 'COUNT';
}Constants for data aggregation methods.
const AGGREGATION_OPERATION: {
readonly SUM: 'SUM';
readonly MEAN: 'MEAN';
readonly MIN: 'MIN';
readonly MAX: 'MAX';
readonly COUNT: 'COUNT';
};Usage Examples:
import {Deck, GridLayer, HexagonLayer, HeatmapLayer} from 'deck.gl';
// Grid aggregation
const gridLayer = new GridLayer({
id: 'grid',
data: points,
getPosition: d => d.coordinates,
getWeight: d => d.value,
cellSize: 1000,
elevationScale: 100,
extruded: true,
colorRange: [
[255, 255, 178],
[254, 204, 92],
[253, 141, 60],
[227, 26, 28]
]
});
// Hexagon aggregation with percentile filtering
const hexagonLayer = new HexagonLayer({
id: 'hexagon',
data: points,
getPosition: d => d.coordinates,
getColorWeight: d => d.population,
getElevationWeight: d => d.income,
radius: 500,
elevationScale: 50,
extruded: true,
upperPercentile: 95,
lowerPercentile: 5
});
// Heat map
const heatmapLayer = new HeatmapLayer({
id: 'heatmap',
data: points,
getPosition: d => d.coordinates,
getWeight: d => d.intensity,
radiusPixels: 100,
intensity: 2,
threshold: 0.1,
colorRange: [
[0, 0, 0, 0],
[255, 0, 0, 255]
]
});
// Contour lines
const contourLayer = new ContourLayer({
id: 'contour',
data: points,
getPosition: d => d.coordinates,
getWeight: d => d.elevation,
cellSize: 200,
contours: [\n {threshold: 100, color: [255, 0, 0], strokeWidth: 2},\n {threshold: 200, color: [0, 255, 0], strokeWidth: 3},\n {threshold: 300, color: [0, 0, 255], strokeWidth: 4}\n ]\n});\n```\n\n## Performance Optimization\n\n### GPU vs CPU Aggregation\n\n```typescript\n// GPU aggregation (faster for large datasets)\nconst gridLayer = new GridLayer({\n id: 'gpu-grid',\n data: largeDataset,\n getPosition: d => d.coordinates,\n cellSize: 1000,\n gpuAggregation: true // Enable GPU processing\n});\n\n// CPU aggregation (more flexible)\nconst gridLayer = new GridLayer({\n id: 'cpu-grid',\n data: smallDataset,\n getPosition: d => d.coordinates,\n cellSize: 1000,\n gpuAggregation: false // Use CPU processing\n});\n```\n\n### Data Updates\n\n```typescript\n// Efficient updates with change detection\nconst layer = new HexagonLayer({\n id: 'hexagons',\n data: data,\n getPosition: d => d.coordinates,\n updateTriggers: {\n getPosition: data.version, // Update when data changes\n getWeight: filterValue // Update when filter changes\n }\n});\n```\n\n## Types\n\n```typescript { .api }\ntype AggregationOperation = 'SUM' | 'MEAN' | 'MIN' | 'MAX' | 'COUNT';\n```"}]