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

JavaScript

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

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

TypeScript

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

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

React

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

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

Installation

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets

import {ScreenshotWidget, type ScreenshotWidgetProps} from '@deck.gl/widgets';
import '@deck.gl/widgets/stylesheet.css';
new ScreenshotWidget({} satisfies ScreenshotWidgetProps);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />

new deck.ScreenshotWidget({});

Types

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