InfoWidget (Experimental)

The InfoWidget shows a popup when an item in a layer has been clicked.

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

const deck = 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:

• id (default 'info') - Unique id for this widget
• placement (default 'top-left') - Widget position within the view relative to the map container
• viewId (default null) - The viewId prop controls how a widget interacts with views.
• style (default {}) - Additional inline styles on the top HTML element.
• className (default '') - Additional classnames on the top HTML element.

position ([number, number])

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

text (string, optional)

Text to display within widget.

visible (boolean, optional)

Whether the widget is visible.

Default: false

minOffset (number, optional)

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

onClick (Function, optional)

(widget: _InfoWidget, info: PickingInfo) => boolean

Source

modules/widgets/src/info-widget.tsx