PopupWidget

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 {PopupWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  initialViewState: {
    longitude: -0.453,
    latitude: 51.471,
    zoom: 10
  },
  controller: true,
  widgets: [
    new PopupWidget({
      position: [-0.453, 51.471],
      content: {
        text: "I'm here"
      },
      marker: {
        html: '<div style="font-size:28px;transform:translate(-50%,-50%);">🏠</div>'
      },
      defaultIsOpen: true,
      closeButton: true,
      closeOnClickOutside: true
    })
  ]
});

TypeScript

import {Deck} from '@deck.gl/core';
import {PopupWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  initialViewState: {
    longitude: -0.453,
    latitude: 51.471,
    zoom: 10
  },
  controller: true,
  widgets: [
    new PopupWidget({
      position: [-0.453, 51.471],
      content: {
        text: "I'm here"
      },
      marker: {
        html: '<div style="font-size:28px;transform:translate(-50%,-50%);">🏠</div>'
      },
      defaultIsOpen: true,
      closeButton: true,
      closeOnClickOutside: true
    })
  ]
});

React

import React from 'react';
import DeckGL, {PopupWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL
      initialViewState={{
        longitude: -0.453,
        latitude: 51.471,
        zoom: 10
      }}
      controller
    >
      <PopupWidget
        position={[-0.453, 51.471]}
        content={{text: "I'm here"}}
        marker={{
          html: '<div style="font-size:28px;transform:translate(-50%,-50%);">🏠</div>'
        }}
        defaultIsOpen
        closeButton
        closeOnClickOutside
      />
    </DeckGL>
  );
}

Installation

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

import {PopupWidget, type PopupWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new PopupWidget({} satisfies PopupWidgetProps);

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.PopupWidget({});

Types

PopupWidgetProps

The PopupWidget accepts the generic WidgetProps and:

position ([number, number])

Anchor of the popup in world coordinates, e.g. [longitude, latitude].

content (object)

Content to display in the popup. The object may contain the following fields:

• 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

marker (object, optional)

Content to display at the anchor, regardless of whether the popup is open. Clicking on the marker opens the popup. The object may contain the following fields:

• text (string) - Text content to display as the marker
• html (string) - HTML content to display as the marker. If supplied, text is ignored.
• element (HTMLElement) - HTML element to attach to the marker

defaultIsOpen (boolean, optional)

Whether the pop up is open by default.

• Default: true

closeButton (boolean, optional)

Whether to show a close button in the popup.

• Default true

closeOnClickOutside (boolean, optional)

Close the popup if clicked outside.

• Default false

onOpenChange (Function, optional)

Callback when the popup is opened or closed. Receives the following parameters:

• isOpen (boolean) - the next state of the popup

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

Styles

Learn more about how to replace icons in the styling guide.

Name	Type	Default
--icon-close	SVG Data Url	Material Symbol Close

Source

modules/widgets/src/info-widget.tsx