widgets

Overview

:::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. :::

This module packages UI widgets that integrate with deck.gl view state management. It includes classic navigation widgets such as PanWidget and ZoomRangeWidget, HTML overlays, and deck-facing panel widgets for composing sidebars, modals, and info cards around a deck.gl canvas.

For renderer lifecycle management, the package also exports DeviceManager and DeviceTabsWidget. Together they let applications choose WebGPU or WebGL, reuse one cached luma device per backend, and reparent the managed canvas between host elements.

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

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', style: {margin: '16px'}}),
  new ZoomRangeWidget({placement: 'top-left', style: {margin: '96px 0 0 16px'}})
];

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

See the Pan and Zoom widgets example for a non-geospatial walkthrough.

See the Standalone Widgets example for deck-independent usage through @deck.gl-community/panels.

For the deck-facing panel widget APIs, see the Widget Panels example, which combines:

• SidebarPanelWidget for persistent controls
• ModalPanelWidget for tabbed secondary panels
• BoxPanelWidget for static summary cards
• reusable panel definitions imported from @deck.gl-community/panels

Use DeviceManager directly when your application wants custom backend-selection UI or needs to move the managed canvas between containers. Use DeviceTabsWidget when you want a ready-made widget for switching between webgpu and webgl2.

Standalone UI such as ToolbarWidget, ToastWidget, and toastManager is exported from @deck.gl-community/panels, not from this package.