fullscreen-widget.md

FullscreenWidget

import {FullscreenWidgetDemo} from '@site/src/doc-demos/widgets'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

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

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

new Deck({
  widgets: [
    new FullscreenWidget({placement: 'top-left'})
  ]
});

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

new Deck({
  widgets: [
    new FullscreenWidget({placement: 'top-left'})
  ]
});

import React from 'react';
import {DeckGL, FullscreenWidget} from '@deck.gl/react';
import '@deck.gl/widgets/stylesheet.css';

function App() {
  return (
    <DeckGL>
      <FullscreenWidget placement="top-left" />
    </DeckGL>
  );
}

Constructor

import {FullscreenWidget, type FullscreenWidgetProps} from '@deck.gl/widgets';
new FullscreenWidget({} satisfies FullscreenWidgetProps);

Types

FullscreenWidgetProps {#fullscreenwidgetprops}

The FullscreenWidget accepts the generic WidgetProps and:

container (HTMLElement, optional) {#container}

• 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) {#enterlabel}

• Default: 'Enter Fullscreen'

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

exitLabel (string, optional) {#exitlabel}

• Default: 'Exit Fullscreen'

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

onFullscreenChange (Function, optional) {#onfullscreenchange}

(fullscreen: boolean) => void

• Default: () => {}

Callback when fullscreen state changes (via user click or browser fullscreen events).

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

Source

modules/widgets/src/fullscreen-widget.tsx