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.

JavaScript

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

new Deck({
  initialViewState: {
    longitude: 0,
    latitude: 52,
    zoom: 4
  },
  controller: true,
  widgets: [
    new ZoomWidget({placement: 'top-left'})
  ]
});

TypeScript

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

new Deck({
  initialViewState: {
    longitude: 0,
    latitude: 52,
    zoom: 4
  },
  controller: true,
  widgets: [
    new ZoomWidget({placement: 'top-left'})
  ]
});

React

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

function App() {
  return (
    <DeckGL
      initialViewState={{
        longitude: 0,
        latitude: 52,
        zoom: 4
      }}
      controller
    >
      <ZoomWidget placement="top-left" />
    </DeckGL>
  );
}

Installation

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

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

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.ZoomWidget({});

Types

ZoomWidgetProps

The ZoomWidget 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.

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