ResetViewWidget

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.

JavaScript

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
      }
    })
  ]
});

TypeScript

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
      }
    })
  ]
});

React

import React from 'react';
import {DeckGL, _ResetViewWidget as 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>
  );
}

Installation

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

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

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

Types

ResetViewWidgetProps

The ResetViewWidget accepts the generic WidgetProps and:

label (string, optional)

• Default: 'Reset View'

Tooltip message displayed while hovering a mouse over the widget.

initialViewState (ViewState, optional)

• Default: deck.props.initialViewState

The initial view state to reset the view 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