ZoomWidget

This widget controls the zoom level of a deck.gl view. Click '+' to zoom in by 1, click '-' to zoom out by 1. Supports controlling Map and Globe views.

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

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

ZoomProps

The Zoomidget accepts the generic WidgetProps:

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

orientation (string, optional)

Default: 'vertical'

Widget button orientation. Valid options are vertical or horizontal.

zoomInLabel (string, optional)

Tooltip message displayed while hovering a mouse over the zoom in button.

Default: 'Zoom In'

zoomOutLabel (string, optional)

Tooltip message displayed while hovering a mouse over the zoom out button.

Default: 'Zoom Out'

transitionDuration (number, optional)

Default: 200

Zoom transition duration in milliseconds.

Styles

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

Name	Type	Default
--icon-zoom-in	SVG Data Url	Material Symbol Add
--icon-zoom-out	SVG Data Url	Material Symbol Remove

Source

modules/widgets/src/zoom-widget.tsx