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

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

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

ScreenshotWidgetProps

The ScreenshotWidget accepts the generic WidgetProps:

• id (default 'screenshot') - 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.

label (string, optional)

Tooltip message displayed while hovering a mouse over the widget.

Default: 'Screenshot'

imageFormat (string, optional)

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

Default: 'image/png'

onCapture (function, optional)

onCapture(widget: ScreenshotWidget): void

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