DeckGLOverlay
API Reference (beta) for <DeckGLOverlay />
| Property | Type | Description |
|---|---|---|
id optional | string | Id of this Deck instance |
style optional | Partial<CSSStyleDeclaration> | null | Additional CSS styles for the canvas. |
useDevicePixels optional | number | boolean | Controls the resolution of drawing buffer used for rendering. |
pickingRadius optional | number | Extra pixels around the pointer to include while picking. |
parameters optional | Parameters | WebGL parameters to be set before each frame is rendered. |
layerFilter optional | (context: FilterContext) => boolean | null | If supplied, will be called before a layer is drawn to determine whether it should be rendered. |
device optional | Device | null | luma.gl GPU device. A device will be auto-created if not supplied. |
deviceProps optional | DeviceProps | A device will be auto-created if not supplied using these props. |
glOptions optional | {
alpha?: boolean,
antialias?: boolean,
depth?: boolean,
desynchronized?: boolean,
failIfMajorPerformanceCaveat?: boolean,
powerPreference?: "default" | "high-performance" | "low-power",
premultipliedAlpha?: boolean,
preserveDrawingBuffer?: boolean,
stencil?: boolean
} | Options used when creating a WebGL context. |
layers optional | LayersList | The array of Layer instances to be rendered.
Nested arrays are accepted, as well as falsy values (`null`, `false`, `undefined`) |
effects optional | {
id: string,
props: any,
useInPicking?: boolean,
order?: number,
preRender: (opts: LayersPassRenderOptions) => void,
postRender?: (opts: PostRenderOptions) => Framebuffer | null,
getModuleParameters?: (layer: Layer<object>) => any,
setup: (context: EffectContext) => void,
setProps?: (props: any) => void,
cleanup: (context: EffectContext) => void
}[] | The array of effects to be rendered. A lighting effect will be added if an empty array is supplied. |
views optional | never | null | A single View instance, or an array of `View` instances. |
touchAction optional | string | Allow browser default touch actions. |
eventRecognizerOptions optional | {} | Set Hammer.js recognizer options for gesture recognition. See documentation for details. |
_framebuffer optional | Framebuffer | null | (Experimental) Render to a custom frame buffer other than to screen. |
_animate optional | boolean | (Experimental) Forces deck.gl to redraw layers every animation frame. |
_pickable optional | boolean | (Experimental) If set to `false`, force disables all picking features, disregarding the `pickable` prop set in any layer. |
_typedArrayManagerProps optional | TypedArrayManagerOptions | (Experimental) Fine-tune attribute memory usage. See documentation for details. |
widgets optional | {
id: string,
props: any,
viewId?: string | null,
placement?: "fill" | "top-left" | "top-right" | "bottom-left" | "bottom-right",
_element?: HTMLDivElement | null,
onAdd: (params: {
deck: Deck<any>,
viewId: string | null
}) => HTMLDivElement | null,
onRemove: () => void,
setProps: (props: Partial<any>) => void,
onViewportChange?: (viewport: Viewport) => void,
onRedraw?: (params: {
viewports: Viewport[],
layers: Layer<object>[]
}) => void,
onHover?: (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirPointerEvent) => void,
onClick?: (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void,
onDrag?: (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void,
onDragStart?: (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void,
onDragEnd?: (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void
}[] | An array of Widget instances to be added to the parent element. |
onDeviceInitialized optional | (device: Device) => void | Called once the GPU Device has been initiated. |
onWebGLInitialized optional | (gl: WebGL2RenderingContext) => void | - |
onResize optional | (dimensions: {
width: number,
height: number
}) => void | Called when the canvas resizes. |
onViewStateChange optional | (params: ViewStateChangeParameters<ViewStateT>) => ViewStateT | null | void | Called when the user has interacted with the deck.gl canvas, e.g. using mouse, touch or keyboard. |
onInteractionStateChange optional | (state: InteractionState) => void | Called when the user has interacted with the deck.gl canvas, e.g. using mouse, touch or keyboard. |
onBeforeRender optional | (context: {
device: Device,
gl: WebGL2RenderingContext
}) => void | Called just before the canvas rerenders. |
onAfterRender optional | (context: {
device: Device,
gl: WebGL2RenderingContext
}) => void | Called right after the canvas rerenders. |
onLoad optional | () => void | Called once after gl context and all Deck components are created. |
onError optional | (error: Error, layer?: Layer<object> | undefined) => void | null | Called if deck.gl encounters an error.
If this callback is set to `null`, errors are silently ignored. |
onHover optional | (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirPointerEvent) => void | null | Called when the pointer moves over the canvas. |
onClick optional | (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void | null | Called when clicking on the canvas. |
onDragStart optional | (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void | null | Called when the user starts dragging on the canvas. |
onDrag optional | (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void | null | Called when dragging the canvas. |
onDragEnd optional | (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}, event: MjolnirGestureEvent) => void | null | Called when the user releases from dragging the canvas. |
_onMetrics optional | (metrics: DeckMetrics) => void | null | (Experimental) Called once every second with performance metrics. |
getCursor optional | (state: CursorState) => string | A custom callback to retrieve the cursor type. |
getTooltip optional | (info: {
color: Uint8Array<ArrayBuffer | SharedArrayBuffer> | null,
layer: Layer<object> | null,
sourceLayer?: Layer<object> | null,
viewport?: Viewport,
index: number,
picked: boolean,
object?: any,
x: number,
y: number,
pixel?: [number, number],
coordinate?: number[],
devicePixel?: [number, number],
pixelRatio: number
}) => TooltipContent | null | Callback that takes a hovered-over point and renders a tooltip. |
debug optional | boolean | (Debug) Flag to enable WebGL debug mode. Requires importing `@luma.gl/debug`. |
drawPickingColors optional | boolean | (Debug) Render the picking buffer to screen. |
interleaved optional | boolean | - default: false |