Skip to content

compass-widget.md

Latest commit

 

History

History
58 lines (37 loc) · 2.06 KB

compass-widget.md

File metadata and controls

58 lines (37 loc) · 2.06 KB
Raw

import {WidgetPreview} from '@site/src/doc-demos/widgets'; import {CompassWidget} from '@deck.gl/widgets';

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) {#label}

Tooltip message displayed while hovering a mouse over the widget.

Default: 'Compass'

transitionDuration (number, optional) {#transitionduration}

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