ViewSelectorWidget (Experimental)

Provides a dropdown menu for selecting different view modes including single view and split view configurations.

JavaScript

import {Deck} from '@deck.gl/core';
import {MapView} from '@deck.gl/core';
import {_ViewSelectorWidget as ViewSelectorWidget} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

const singleView = [new MapView({id: 'main', controller: true})];
const horizontalSplit = [
  new MapView({id: 'top', controller: true, x: 0, y: 0, width: '100%', height: '50%'}),
  new MapView({id: 'bottom', controller: true, x: 0, y: '50%', width: '100%', height: '50%'})
];
const verticalSplit = [
  new MapView({id: 'left', controller: true, x: 0, y: 0, width: '50%', height: '100%'}),
  new MapView({id: 'right', controller: true, x: '50%', y: 0, width: '50%', height: '100%'})
];

const deck = new Deck({
  views: singleView,
  initialViewState: {
    main: {longitude: 0, latitude: 52, zoom: 4},
    top: {longitude: 0, latitude: 52, zoom: 4},
    bottom: {longitude: 0, latitude: 52, zoom: 4},
    left: {longitude: 0, latitude: 52, zoom: 4},
    right: {longitude: 0, latitude: 52, zoom: 4}
  },
  widgets: [
    new ViewSelectorWidget({
      initialViewMode: 'single',
      onViewModeChange: mode => {
        deck.setProps({
          views:
            mode === 'split-horizontal'
              ? horizontalSplit
              : mode === 'split-vertical'
                ? verticalSplit
                : singleView
        });
      }
    })
  ]
});

TypeScript

import {Deck, MapView} from '@deck.gl/core';
import {_ViewSelectorWidget as ViewSelectorWidget, type ViewMode} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';

const singleView = [new MapView({id: 'main', controller: true})];
const horizontalSplit = [
  new MapView({id: 'top', controller: true, x: 0, y: 0, width: '100%', height: '50%'}),
  new MapView({id: 'bottom', controller: true, x: 0, y: '50%', width: '100%', height: '50%'})
];
const verticalSplit = [
  new MapView({id: 'left', controller: true, x: 0, y: 0, width: '50%', height: '100%'}),
  new MapView({id: 'right', controller: true, x: '50%', y: 0, width: '50%', height: '100%'})
];

const deck = new Deck({
  views: singleView,
  initialViewState: {
    main: {longitude: 0, latitude: 52, zoom: 4},
    top: {longitude: 0, latitude: 52, zoom: 4},
    bottom: {longitude: 0, latitude: 52, zoom: 4},
    left: {longitude: 0, latitude: 52, zoom: 4},
    right: {longitude: 0, latitude: 52, zoom: 4}
  },
  widgets: [
    new ViewSelectorWidget({
      initialViewMode: 'single',
      onViewModeChange: (mode: ViewMode) => {
        deck.setProps({
          views:
            mode === 'split-horizontal'
              ? horizontalSplit
              : mode === 'split-vertical'
                ? verticalSplit
                : singleView
        });
      }
    })
  ]
});

React

import React, {useState} from 'react';
import DeckGL, {_ViewSelectorWidget as ViewSelectorWidget} from '@deck.gl/react';
import {MapView} from '@deck.gl/core';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  const [mode, setMode] = useState<'single' | 'split-horizontal' | 'split-vertical'>('single');

  const views =
    mode === 'split-horizontal'
      ? [
          new MapView({id: 'top', controller: true, x: 0, y: 0, width: '100%', height: '50%'}),
          new MapView({id: 'bottom', controller: true, x: 0, y: '50%', width: '100%', height: '50%'})
        ]
      : mode === 'split-vertical'
        ? [
            new MapView({id: 'left', controller: true, x: 0, y: 0, width: '50%', height: '100%'}),
            new MapView({id: 'right', controller: true, x: '50%', y: 0, width: '50%', height: '100%'})
          ]
        : [new MapView({id: 'main', controller: true})];

  return (
    <DeckGL
      views={views}
      initialViewState={{
        main: {longitude: 0, latitude: 52, zoom: 4},
        top: {longitude: 0, latitude: 52, zoom: 4},
        bottom: {longitude: 0, latitude: 52, zoom: 4},
        left: {longitude: 0, latitude: 52, zoom: 4},
        right: {longitude: 0, latitude: 52, zoom: 4}
      }}
    >
      <ViewSelectorWidget initialViewMode="single" onViewModeChange={setMode} />
    </DeckGL>
  );
}

Installation

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

import {_ViewSelectorWidget as ViewSelectorWidget, type ViewSelectorWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new ViewSelectorWidget({} satisfies ViewSelectorWidgetProps);

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

Types

ViewSelectorWidgetProps

The ViewSelectorWidget accepts the generic WidgetProps and:

• initialViewMode (ViewMode, default 'single') - Initial view mode selection
• onViewModeChange (function, optional) - Callback invoked when view mode changes. Receives the new ViewMode.
• label (string, default 'Split View') - Tooltip label for the widget

ViewMode

Available view modes:

• 'single' - Single view display
• 'split-horizontal' - Two views split horizontally (top/bottom)
• 'split-vertical' - Two views split vertically (left/right)

Behavior

• Click the button to open a dropdown menu with view mode options
• Each option shows an icon representing the layout
• Selection updates the current view mode internally
• The widget button displays an icon matching the currently selected mode

Integration

This widget provides the UI for view mode selection but does not currently trigger callbacks or modify deck.gl view configuration automatically. Applications need to implement custom logic to detect view mode changes and update view configurations accordingly.

Source

modules/widgets/src/view-selector-widget.tsx