ResetViewWidget

April 18, 2026 · View on GitHub

import {ResetViewWidgetDemo} from '@site/src/doc-demos/widgets'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

This widget resets the view state of a deck.gl viewport to its initial state. The user clicks the widget to return to the initial view.

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

new Deck({
  initialViewState: {
    longitude: 0,
    latitude: 52,
    zoom: 4
  },
  controller: true,
  widgets: [
    new ResetViewWidget({
      initialViewState: {
        longitude: -20,
        latitude: 15,
        zoom: 0
      }
    })
  ]
});

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

new Deck({
  initialViewState: {
    longitude: 0,
    latitude: 52,
    zoom: 4
  },
  controller: true,
  widgets: [
    new ResetViewWidget({
      initialViewState: {
        longitude: -20,
        latitude: 15,
        zoom: 0
      }
    })
  ]
});

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

function App() {
  return (
    <DeckGL
      initialViewState={{
        longitude: 0,
        latitude: 52,
        zoom: 4
      }}
      controller
    >
      <ResetViewWidget
        initialViewState={{
          longitude: -20,
          latitude: 15,
          zoom: 0
        }}
      />
    </DeckGL>
  );
}

Constructor

import {ResetViewWidget, type ResetViewWidgetProps} from '@deck.gl/widgets';
new ResetViewWidget({} satisfies ResetViewWidgetProps);

Types

`ResetViewWidgetProps` {#resetviewwidgetprops}

The ResetViewWidget accepts the generic WidgetProps and:

`label` (string, optional) {#label}

Default: 'Reset View'

Tooltip message displayed while hovering a mouse over the widget.

`initialViewState` (ViewState, optional) {#initialviewstate}

Default: deck.props.initialViewState

The initial view state to reset the view to.

`onReset` (Function, optional) {#onreset}

(params: {viewId: string; viewState: Record<string, unknown>}) => void

Default: () => {}

Callback when the reset view button is clicked.

viewId: The view being reset
viewState: The view state being reset to

Styles

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

Name	Type	Default
`--icon-reset-view`	SVG Data Url	[Material Symbol Reset Focus][icon_reset_view]

Source

modules/widgets/src/reset-view-widget.tsx