Skip to main content

FullscreenWidget

This widget enlarges deck.gl to fill the full screen. Click the widget to enter or exit full screen.

import {FullscreenWidget} from '@deck.gl/widgets';
import {Deck} from '@deck.gl/core';

const deck = new Deck({
widgets: [new FullscreenWidget()]
});

Types

FullscreenWidgetProps

The FullscreenWidget accepts the generic WidgetProps:

  • id (default 'fullscreen') - Unique id for this widget
  • placement (default 'top-left') - Widget position within the view relative to the map container
  • viewId (default null) - The viewId prop controls how a widget interacts with views.
  • style (default {}) - Additional inline styles on the top HTML element.
  • className (default '') - Additional classnames on the top HTML element.

container (HTMLElement, optional)

Default: undefined

A compatible DOM element which should be made full screen. By default, the map container element will be made full screen.

enterLabel (string, optional)

Tooltip message displayed while hovering a mouse over the widget when out of fullscreen.

Default: 'Enter Fullscreen'

exitLabel (string, optional)

Tooltip message displayed while hovering a mouse over the widget when fullscreen.

Default: 'Exit Fullscreen'

style (object, optional)

Default: {}

Additional CSS styles for the widget. camelCase CSS properties (e.g. backgroundColor) and kabab-case CSS variables are accepted (e.g. --button-size).

className (string, optional)

Default: undefined

Class name to attach to the widget element. The element has the default class name of deck-widget deck-fullscreen-widget.

Styles

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

NameTypeDefault
--icon-fullscreen-enterSVG Data UrlMaterial Symbol Fullscreen
--icon-fullscreen-exitSVG Data UrlMaterial Symbol Fullscreen Exit

Source

modules/widgets/src/fullscreen-widget.tsx