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 widgetplacement
(default'top-left'
) - Widget position within the view relative to the map containerviewId
(defaultnull
) - TheviewId
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.
Name | Type | Default |
---|---|---|
--icon-fullscreen-enter | SVG Data Url | Material Symbol Fullscreen |
--icon-fullscreen-exit | SVG Data Url | Material Symbol Fullscreen Exit |