Skip to main content

Overview

This package bundles widgets that integrate with deck.gl's built-in widget system. Widgets are small UI controls that the Deck class can mount in a view to manipulate the current view state.

Alongside classic navigation and overlay widgets, the package also exports deck-facing panel wrappers for assembling reusable sidebars, modals, and summary cards around a deck.gl canvas.

For renderer selection and reusable luma device lifecycle, the package also exports DeviceManager and DeviceTabsWidget.

Panel definitions and standalone mounting live in @deck.gl-community/panels. Import panels and panel containers from panels, then pass them to the panel widgets in this package.

caution

The deck.gl-community repository is semi-maintaned. One of its goals is to collect and preserve valuable deck.gl ecosystem related code that does not have a dedicated home. Some modules may no longer have dedicated maintainers. This means that there is sometimes no one who can respond quickly to issues.

Installation​

npm install @deck.gl-community/widgets

Usage​

import DeckGL from '@deck.gl/react';
import {OrthographicView} from '@deck.gl/core';
import {PanWidget, ZoomRangeWidget} from '@deck.gl-community/widgets';

const widgets = [
  new PanWidget({placement: 'top-left'}),
  new ZoomRangeWidget({placement: 'top-left', style: {marginTop: '80px'}})
];

export function App() {
  return (
    <DeckGL
      views={new OrthographicView({id: 'main'})}
      initialViewState={{target: [0, 0], zoom: 0}}
      controller={true}
      widgets={widgets}
      layers={[]}
    />
  );
}

The Pan and Zoom widgets example shows the controls managing an orthographic view over abstract data.

The Widget Panels example demonstrates the panel composition APIs with a persistent sidebar, a tabbed modal, and a static info box built from shared panel definitions.

For deck-independent mounting, use @deck.gl-community/panels and the Standalone Widgets example.

See the Panels developer guide for the core panel composition concepts.

Use DeviceManager when an application needs one reusable WebGPU or WebGL device that can be shared across UI surfaces and reparented into different DOM hosts. Use DeviceTabsWidget when you want a built-in widget for switching the active backend.

The SharedTile2DLayer example uses panel widgets to combine markdown and live probe.gl stats in one collapsible BoxPanelWidget.

HTML overlays​

Use HtmlOverlayWidget when you need HTML anchored to geographic coordinates. The widget renders with Preact, so items can be created with preact.h and supplied as items:

import {h} from 'preact';
import {HtmlOverlayItem, HtmlOverlayWidget} from '@deck.gl-community/widgets';

const overlayWidget = new HtmlOverlayWidget({
  items: data.map((item) =>
    h(HtmlOverlayItem, {coordinates: item.coordinates, key: item.id}, item.label)
  )
});

The HTML overlays example shows styled city callouts bound to map positions via the widget lifecycle.

Classic Widgets​

Overlay Widgets​

Advanced UI Widgets​

Standalone UI such as ToolbarPanelContainer, ToastPanelContainer, and toastManager lives in @deck.gl-community/panels.

Panel Widgets​

Widgets that host reusable panel content:

Use panel definitions from @deck.gl-community/panels: