InfoWidget (Experimental)

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

JavaScript

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

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.78,
    zoom: 10
  },
  controller: true,
  layers: [
    new ScatterplotLayer({
      id: 'points',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [200, 0, 80],
      pickable: true
    })
  ],
  widgets: [
    new InfoWidget({
      mode: 'hover',
      getTooltip: info =>
        info.object && {
          text: info.object.name
        },
      style: {minWidth: '160px', fontSize: '12px'}
    })
  ]
});

TypeScript

import {Deck, type PickingInfo} from '@deck.gl/core';
import {_InfoWidget as InfoWidget} from '@deck.gl/widgets';
import {ScatterplotLayer} from '@deck.gl/layers';
import '@deck.gl/widgets/stylesheet.css';

type BartStation = {
  name: string;
  coordinates: [longitude: number, latitude: number];
};

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.78,
    zoom: 10
  },
  controller: true,
  layers: [
    new ScatterplotLayer<BartStation>({
      id: 'points',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [200, 0, 80],
      pickable: true
    })
  ],
  widgets: [
    new InfoWidget({
      mode: 'hover',
      getTooltip: (info: PickingInfo<BartStation>) =>
        info.object && {
          text: info.object.name
        },
      style: {minWidth: '160px', fontSize: '12px'}
    })
  ]
});

React

import React, {useCallback} from 'react';
import DeckGL, {_InfoWidget as InfoWidget} from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';
import type {PickingInfo} from '@deck.gl/core';
import '@deck.gl/widgets/stylesheet.css';

type BartStation = {
  name: string;
  coordinates: [longitude: number, latitude: number];
};

function App() {
  const layers = [
    new ScatterplotLayer<BartStation>({
      id: 'points',
      data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
      getPosition: d => d.coordinates,
      getRadius: 100,
      getFillColor: [200, 0, 80],
      pickable: true
    })
  ];

  const getTooltip = useCallback((info: PickingInfo<BartStation>) => {
    return info.object && {
      text: info.object.name
    };
  }, []);

  return (
    <DeckGL
      initialViewState={{
        longitude: -122.4,
        latitude: 37.78,
        zoom: 10
      }}
      controller
      layers={layers}
    >
      <InfoWidget
        mode="hover"
        getTooltip={getTooltip}
        style={{minWidth: '160px', fontSize: '12px'}}
      />
    </DeckGL>
  );
}

Installation

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets

import {_InfoWidget as InfoWidget, type InfoWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new InfoWidget({} satisfies InfoWidgetProps);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />

new deck._InfoWidget({});

Types

InfoWidgetProps

The InfoWidget accepts the generic WidgetProps and:

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.

minOffset (number, optional)

• Default: 0

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

getTooltip (Function)

(info: PickingInfo, widget: InfoWidget) => TooltipContent | null

Function to generate the popup contents from the selected element. The returned object may contain the following fields:

• position (number[]) - Anchor of the popup in world coordinates, e.g. [longitude, latitude]. If not supplied, default to the mouse position where the popup was triggered.
• text (string) - Text content to display in the popup
• html (string) - HTML content to display in the popup. If supplied, text is ignored.
• element (HTMLElement) - HTML element to attach to the popup
• className (string) - additional class name to add to the popup
• style - CSS style overrides

placement (string, optional)

Position content relative to the anchor. One of bottom | left | right | top | bottom-start | bottom-end | left-start | left-end | right-start | right-end | top-start | top-end

• Default: 'right'

offset (number)

Pixel offset from the anchor

• Default: 10

arrow (false | number | [number, number])

Show an arrow pointing at the anchor. Value can be one of the following:

• false - do not display an arrow

• number - pixel size of the arrow

• [width: number, height: number] - pixel size of the arrow

• Default: 10

Source

modules/widgets/src/info-widget.tsx