Skip to main content

InfoWidget (Experimental)

from v9.2

This widget shows a popup at a fixed position, or when an item in a deck.gl layer has been clicked or hovered.

Usage

import {Deck} from '@deck.gl/core';
import {_InfoWidget as InfoWidget} from '@deck.gl/widgets';

new Deck({
widgets: [
new InfoWidget({
visible: true,
position: [0.45, 51.47],
text: "Info",
style: {width: 200, boxShadow: 'rgba(0, 0, 0, 0.5) 2px 2px 5px'}
})
]
});

Types

InfoWidgetProps

The InfoWidget accepts the generic WidgetProps and:

position ([number, number])

  • Default: [0, 0]

Position at which to place popup (e.g. [longitude, latitude]).

text (string, optional)

  • Default: ''

Text to display within widget.

visible (boolean, optional)

  • Default: false

Whether the widget is visible.

mode (string, optional)

  • Default: 'hover'

Determines the interaction mode of the widget:

  • 'click': The widget is triggered by a user click.
  • 'hover': The widget is triggered when the user hovers over an element.
  • 'static': The widget remains visible at a fixed position.

minOffset (number, optional)

  • Default: 0

Minimum offset (in pixels) to keep the popup away from the canvas edges.

getTooltip (Function, optional)

(info: PickingInfo, widget: InfoWidget) => InfoWidgetProps | null
  • Default: undefined

Function to generate the popup contents from the selected element.

onClick (Function, optional)

(widget: InfoWidget, info: PickingInfo) => boolean
  • Default: undefined

Callback triggered when the widget is clicked.

Source

modules/widgets/src/info-widget.tsx