CompassWidget

This widget visualizes bearing and pitch. Click it once to reset bearing to 0, click it a second time to reset pitch to 0. Supports MapView and GlobeView.

JavaScript

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

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.8,
    zoom: 11,
    pitch: 45,
    bearing: 30
  },
  controller: true,
  widgets: [
    new CompassWidget({placement: 'top-left'})
  ]
});

TypeScript

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

new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.8,
    zoom: 11,
    pitch: 45,
    bearing: 30
  },
  controller: true,
  widgets: [
    new CompassWidget({placement: 'top-left'})
  ]
});

React

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

function App() {
  return (
    <DeckGL
      initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 11,
        pitch: 45,
        bearing: 30
      }}
      controller
    >
      <CompassWidget placement="top-left" />
    </DeckGL>
  );
}

Installation

To install the dependencies from NPM:

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

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

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

Types

CompassWidgetProps

The CompassWidget accepts the generic WidgetProps and:

label (string, optional)

• Default: 'Compass'

Tooltip message displayed while hovering a mouse over the widget.

transitionDuration (number, optional)

• Default: 200

Bearing and pitch reset transition duration in milliseconds.

Styles

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

Name	Type	Default
--icon-compass	SVG Data Url	Custom Icon
--icon-compass-north-color	Color	rgb(240, 92, 68)
--icon-compass-south-color	Color	rgb(204, 204, 204)

Source

modules/widgets/src/compass-widget.tsx