PopupWidget

March 13, 2026 · View on GitHub

import {PopupWidgetDemo} from '@site/src/doc-demos/widgets'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

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

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
    })
  ]
});

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
    })
  ]
});

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>
  );
}

Constructor

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

Types

`PopupWidgetProps` {#popupwidgetprops}

The PopupWidget accepts the generic WidgetProps and:

position ([number, number]) {#position}

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

content (object) {#content}

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) {#marker}

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