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