ScreenshotWidget

This widget captures and downloads the deck.gl screen (canvas). Click the widget to capture an image of the screen. The image will be downloaded by the browser into the user's "download" folder.

info

Only the deck.gl canvas is captured, not other HTML DOM element underneath or on top of that canvas. This means that e.g. a non-interleaved basemap, or any widgets, will not be captured. It is possible to use props.onCapture to integrate with more advanced screen capture modules such as html2canvas

Usage

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

new Deck({
  widgets: [new ScreenshotWidget()]
});

ScreenshotWidgetProps

The ScreenshotWidget accepts the generic WidgetProps and:

label (string, optional)

• Default: 'Screenshot'

Tooltip message displayed while hovering a mouse over the widget.

filename (string, optional)

• Default: 'screenshot.png'

Filename for captured screenshot.

imageFormat (string, optional)

• Default: 'image/png'

Format of the downloaded image. Browser dependent, may support image/jpeg, image/webp, image/avif

onCapture (function, optional)

(widget: ScreenshotWidget) => void

• Default: undefined

Allows the application to define its own capture logic, perhaps to integrate a more advanced screen capture module such as html2canvas.

Styles

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

Name	Type	Default
--icon-camera	SVG Data Url	[Material Symbol Photo Camera][camera_icon_url]

Source

modules/widgets/src/screenshot-widget.tsx