Core rendering engine and foundational classes that form the backbone of deck.gl. This includes the main Deck orchestrator, Layer base classes, and the underlying rendering system.
The primary class for creating and managing deck.gl instances. Orchestrates layers, views, effects, and user interactions.
/**
* Main deck.gl orchestrator class
*/
class Deck {
constructor(props: DeckProps);
/** Pick a single object at screen coordinates */
pickObject(opts: {
x: number;
y: number;
radius?: number;
layerIds?: string[];
unproject3D?: boolean;
}): PickingInfo | null;
/** Pick multiple objects in a rectangular area */
pickObjects(opts: {
x: number;
y: number;
width?: number;
height?: number;
layerIds?: string[];
unproject3D?: boolean;
}): PickingInfo[];
/** Pick multiple objects with advanced options */
pickMultipleObjects(opts: {
x: number;
y: number;
radius?: number;
layerIds?: string[];
depth?: number;
unproject3D?: boolean;
}): PickingInfo[];
/** Force a redraw of all layers */
redraw(): void;
/** Clean up resources and event listeners */
finalize(): void;
/** Get current view state */
readonly viewState: any;
/** Get current layer manager */
readonly layerManager: LayerManager;
/** Get current deck renderer */
readonly deckRenderer: DeckRenderer;
}
interface DeckProps {
/** Canvas element or CSS selector */
canvas?: HTMLCanvasElement | string;
/** Canvas width */
width?: string | number;
/** Canvas height */
height?: string | number;
/** Array of layer instances */
layers?: Layer[];
/** View configuration - single view or array of views */
views?: View | View[];
/** Current view state (camera position) */
viewState?: any;
/** Initial view state for uncontrolled components */
initialViewState?: any;
/** Controller configuration for user interaction */
controller?: boolean | Controller | {[viewId: string]: Controller};
/** Visual effects (lighting, post-processing) */
effects?: Effect[];
/** Coordinate system for layers */
coordinateSystem?: CoordinateSystem;
/** WebGL context parameters */
glOptions?: any;
/** View state change callback */
onViewStateChange?: (params: {
viewState: any;
interactionState: any;
oldViewState: any;
viewId?: string;
}) => void;
/** Interaction state change callback */
onInteractionStateChange?: (params: {
isDragging: boolean;
inTransition: boolean;
}) => void;
/** Pre-render callback */
onBeforeRender?: (params: {gl: WebGLRenderingContext}) => void;
/** Post-render callback */
onAfterRender?: (params: {gl: WebGLRenderingContext}) => void;
/** Load completion callback */
onLoad?: () => void;
/** Error callback */
onError?: (error: Error) => void;
/** Resize callback */
onResize?: (params: {width: number, height: number}) => void;
/** Device pixel ratio for high-DPI displays */
useDevicePixels?: boolean | number;
/** WebGL debug mode */
debug?: boolean;
/** Layer filter function */
layerFilter?: (params: {layer: Layer, viewport: Viewport}) => boolean;
/** Custom cursor styles */
getCursor?: (params: {isDragging: boolean, isHovering: boolean}) => string;
}Usage Examples:
import {Deck, ScatterplotLayer} from 'deck.gl';
// Basic setup
const deck = new Deck({
canvas: 'my-canvas',
initialViewState: {
longitude: -122.4,
latitude: 37.8,
zoom: 12
},
controller: true,
layers: [
new ScatterplotLayer({
id: 'points',
data: myData,
getPosition: d => d.coordinates,
getRadius: 100,
getFillColor: [255, 0, 0]
})
]
});
// With event handling
const deck = new Deck({
canvas: 'my-canvas',
initialViewState: initialViewState,
controller: true,
layers: layers,
onViewStateChange: ({viewState}) => {
// Handle view changes
console.log('View changed:', viewState);
},
onLoad: () => {
console.log('Deck loaded');
}
});
// Picking objects
const pickInfo = deck.pickObject({x: 100, y: 200});
if (pickInfo) {
console.log('Picked object:', pickInfo.object);
}Abstract base class for all visualization layers. Provides common functionality for data handling, rendering, and interaction.
/**
* Base class for all deck.gl layers
*/
abstract class Layer {
constructor(props: LayerProps);
/** Unique layer identifier */
readonly id: string;
/** Current layer props */
readonly props: LayerProps;
/** Current layer state */
readonly state: LayerState;
/** Layer data source */
readonly data: any;
/** Whether layer is currently visible */
readonly visible: boolean;
/** Customize object picking behavior */
getPickingInfo(params: GetPickingInfoParams): PickingInfo;
/** Filter which sublayers are rendered */
filterSubLayer(context: FilterContext): boolean;
/** Get shader modules for this layer */
getShaders(): any;
/** Initialize layer state (override in subclasses) */
protected initializeState(): void;
/** Update layer state when props change (override in subclasses) */
protected updateState(params: UpdateParameters): void;
/** Clean up layer resources (override in subclasses) */
protected finalizeState(): void;
/** Check if layer needs redraw */
protected shouldUpdateState(params: {
props: LayerProps;
oldProps: LayerProps;
context: LayerContext;
changeFlags: ChangeFlags;
}): boolean;
/** Get default layer props */
static get defaultProps(): any;
}
interface LayerProps {
/** Unique layer identifier */
id: string;
/** Data source - array, async iterable, or data URL */
data?: any;
/** Layer visibility */
visible?: boolean;
/** Enable object picking */
pickable?: boolean;
/** Layer opacity (0-1) */
opacity?: number;
/** Auto-highlight on hover */
autoHighlight?: boolean;
/** Highlight color for auto-highlight */
highlightColor?: Color;
/** Coordinate system for positions */
coordinateSystem?: CoordinateSystem;
/** Wrap longitude for web mercator */
wrapLongitude?: boolean;
/** Position/scale for METER_OFFSETS coordinate system */
coordinateOrigin?: Position;
/** Model matrix transformation */
modelMatrix?: number[];
/** Change detection triggers for accessors */
updateTriggers?: {[key: string]: any};
/** Animation transitions */
transitions?: {[key: string]: any};
/** Layer extensions */
extensions?: LayerExtension[];
/** Custom shader modules */
modules?: any[];
/** Material properties for lighting */
material?: Material;
/** Z-fighting resolution */
getPolygonOffset?: (params: {layerIndex: number}) => [number, number];
/** Custom click handler */
onClick?: (info: PickingInfo, event: any) => boolean;
/** Custom hover handler */
onHover?: (info: PickingInfo, event: any) => boolean;
/** Custom drag start handler */
onDragStart?: (info: PickingInfo, event: any) => boolean;
/** Custom drag handler */
onDrag?: (info: PickingInfo, event: any) => boolean;
/** Custom drag end handler */
onDragEnd?: (info: PickingInfo, event: any) => boolean;
}
interface PickingInfo {
/** Layer that was picked */
layer: Layer | null;
/** Index of picked object in data array */
index: number;
/** Picked data object */
object: any;
/** Screen x coordinate */
x: number;
/** Screen y coordinate */
y: number;
/** World coordinate */
coordinate: Position;
/** Device pixel coordinate */
devicePixel: [number, number];
/** Pixel color at pick location */
pixelColor: [number, number, number, number];
}Base class for layers that render multiple sublayers. Useful for creating complex visualizations from simpler components.
/**
* Base class for layers composed of multiple sublayers
*/
abstract class CompositeLayer extends Layer {
constructor(props: CompositeLayerProps);
/** Define sublayers to render (override in subclasses) */
protected abstract renderLayers(): Layer[];
/** Get sublayer class for given id */
protected getSubLayerClass(id: string, DefaultLayerClass: any): any;
/** Get sublayer props with proper inheritance */
protected getSubLayerProps(props?: any): any;
/** Get accessor value, handling both functions and constants */
protected getSubLayerAccessor<T>(accessor: Accessor<T>): Accessor<T>;
/** Get sublayer row for given index */
protected getSubLayerRow(row: any, index: number, sourceLayer: Layer): any;
}
interface CompositeLayerProps extends LayerProps {
/** Custom sublayer classes */
_subLayerProps?: {[id: string]: any};
}Manages layer lifecycle, updates, and rendering coordination.
/**
* Manages layer lifecycle and rendering
*/
class LayerManager {
constructor(gl: WebGLRenderingContext, props?: any);
/** Set new layers and update existing ones */
setLayers(layers: Layer[], forceUpdate?: boolean): void;
/** Update layers with new props */
updateLayers(): void;
/** Check if layers need redraw */
needsRedraw(): boolean;
/** Check if layers need update */
needsUpdate(): boolean;
/** Get array of layers needing redraw */
getLayers(): Layer[];
/** Activate viewport and prepare for rendering */
activateViewport(viewport: Viewport): void;
/** Clean up resources */
finalize(): void;
}
type LayersList = Layer[];
interface LayerContext {
/** WebGL rendering context */
gl: WebGLRenderingContext;
/** Current viewport */
viewport: Viewport;
/** Whether in picking mode */
isPicking: boolean;
/** Layer manager instance */
layerManager: LayerManager;
/** Mouse position for picking */
mousePosition?: [number, number];
}Manages WebGL attributes for efficient rendering of large datasets.
/**
* Manages WebGL vertex attributes
*/
class AttributeManager {
constructor(gl: WebGLRenderingContext, props?: any);
/** Add vertex attribute definition */
add(attributes: {[key: string]: AttributeDescriptor}): void;
/** Update attribute values from data */
update(options?: {
data?: any;
numInstances?: number;
startRow?: number;
endRow?: number;
partial?: boolean;
}): void;
/** Get attribute by name */
getAttribute(name: string): Attribute;
/** Get all attributes */
getAttributes(): {[key: string]: Attribute};
/** Get changed attributes since last call */
getChangedAttributes(options?: {clearChangedFlags?: boolean}): {[key: string]: Attribute};
/** Check if any attributes have changed */
hasChanged(): boolean;
/** Get total number of instances */
getNumInstances(): number;
/** Clean up WebGL resources */
finalize(): void;
}
interface AttributeDescriptor {
/** Number of components per vertex */
size: number;
/** Data type (GL.FLOAT, GL.UNSIGNED_BYTE, etc.) */
type?: number;
/** Accessor function or constant value */
accessor: string | ((object: any, info: AccessorContext) => any);
/** Transform function for preprocessing data */
transform?: (value: any) => any;
/** Whether attribute is instanced */
instanced?: boolean;
/** Default value when data is missing */
defaultValue?: number | number[];
/** Update trigger dependencies */
updateTrigger?: string;
/** Normalize values to [0,1] range */
normalized?: boolean;
}
interface BinaryAttribute {
/** Typed array containing attribute data */
value: TypedArray;
/** Number of components per element */
size: number;
/** Element stride in bytes */
stride?: number;
/** Byte offset to start of data */
offset?: number;
}Low-level rendering coordination and WebGL state management.
/**
* Coordinates rendering of layers and effects
*/
class DeckRenderer {
constructor(gl: WebGLRenderingContext);
/** Render layers with current viewport and effects */
render(options: {
layers: Layer[];
viewports: Viewport[];
effects?: Effect[];
pass?: string;
redrawReason?: string;
}): void;
/** Check if renderer needs redraw */
needsRedraw(): boolean;
/** Clean up resources */
finalize(): void;
}Core constants used throughout the deck.gl system.
/** Coordinate system constants */
const COORDINATE_SYSTEM: {
readonly DEFAULT: -1;
readonly CARTESIAN: 0;
readonly LNGLAT: 1;
readonly METER_OFFSETS: 2;
readonly LNGLAT_OFFSETS: 3;
};
/** Unit constants for measurements */
const UNIT: {
readonly common: 0;
readonly meters: 1;
readonly pixels: 2;
};
/** Operation constants for layer rendering */
const OPERATION: {
readonly DRAW: string;
readonly MASK: string;
readonly TERRAIN: string;
};
/** Transition event constants */
const TRANSITION_EVENTS: {
readonly BREAK: string;
readonly SNAP_TO_END: string;
readonly IGNORE: string;
readonly UPDATE: string;
};
/** Library version string */
const VERSION: string;Animation and interpolation classes for smooth view transitions.
/**
* Base class for view transition interpolators
*/
abstract class TransitionInterpolator {
constructor(opts?: any);
/** Interpolate between start and end states */
abstract interpolateProps(
startProps: any,
endProps: any,
t: number
): any;
/** Get transition duration */
getDuration(startProps: any, endProps: any): number;
}
/**
* Linear interpolation between view states
*/
class LinearInterpolator extends TransitionInterpolator {
constructor(opts?: {
around?: [number, number];
transitionProps?: string[];
});
}
/**
* Smooth fly-to transition between view states
*/
class FlyToInterpolator extends TransitionInterpolator {
constructor(opts?: {
curve?: number;
speed?: number;
maxDuration?: number;
screenSpeed?: number;
});
}Core utility functions for common operations.
/** Logging utility with multiple levels */
declare const log: {
log(level: number, message: string, ...args: any[]): void;
info(message: string, ...args: any[]): void;
warn(message: string, ...args: any[]): void;
error(message: string, ...args: any[]): void;
};
/** Assertion utility for debugging */
declare function assert(condition: any, message?: string): void;
/** Create iterable from various data sources */
declare function createIterable(
data: any,
options?: {
startRow?: number;
endRow?: number;
}
): Iterable<any>;
/** Get low precision part for 64-bit float emulation */
declare function fp64LowPart(x: number): number;
/** Tesselation utility for complex polygons */
class Tesselator {
constructor(opts?: any);
tesselate(polygon: number[][]): {positions: number[], indices: number[]};
}type CoordinateSystem = -1 | 0 | 1 | 2 | 3;
type Position = [number, number] | [number, number, number];
type Color = [number, number, number] | [number, number, number, number];
type Unit = 'common' | 'meters' | 'pixels';
type Accessor<T> = T | ((object: any, info: AccessorContext) => T);
interface AccessorContext {
index: number;
data: any;
target: any[];
}
interface UpdateParameters {
props: LayerProps;
oldProps: LayerProps;
context: LayerContext;
changeFlags: ChangeFlags;
}
interface ChangeFlags {
dataChanged: boolean;
propsChanged: boolean;
viewportChanged: boolean;
extensionsChanged: boolean;
updateTriggersChanged: any;
}
interface LayerState {
attributeManager?: AttributeManager;
model?: any;
[key: string]: any;
}
interface GetPickingInfoParams {
info: PickingInfo;
mode: string;
sourceLayer?: Layer;
}
interface Material {
ambient?: number;
diffuse?: number;
shininess?: number;
specularColor?: Color;
}