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 |