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 Map and Globe view.

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

const deck = new Deck({
  widgets: [new CompassWidget()]
});

Types

CompassWidgetProps

The CompassWidget accepts the generic WidgetProps:

• id (default 'compass') - Unique id for this widget
• placement (default 'top-left') - Widget position within the view relative to the map container
• viewId (default null) - The viewId prop controls how a widget interacts with views.
• style (default {}) - Additional inline styles on the top HTML element.
• className (default '') - Additional classnames on the top HTML element.

label (string, optional)

Tooltip message displayed while hovering a mouse over the widget.

Default: 'Compass'

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