Skip to main content

ZoomWidget

from v9.0

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.

Usage

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 and:

orientation (string, optional)

  • Default: 'vertical'

Widget button orientation. Valid options are vertical or horizontal.

zoomInLabel (string, optional)

  • Default: 'Zoom In'

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

zoomOutLabel (string, optional)

  • Default: 'Zoom Out'

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

transitionDuration (number, optional)

  • Default: 200

Zoom transition duration in milliseconds.

Styles

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

NameTypeDefault
--icon-zoom-inSVG Data UrlMaterial Symbol Add
--icon-zoom-outSVG Data UrlMaterial Symbol Remove

Source

modules/widgets/src/zoom-widget.tsx