Skip to main content

ScaleWidget (Experimental)

from v9.2

This widget displays a dynamic cartographic scale bar that updates as the map view changes. It shows a horizontal line with end tick marks and a distance label, reflecting the current map scale based on zoom level and latitude.

import {_ScaleWidget as ScaleWidget} from '@deck.gl/widgets';
import {Deck} from '@deck.gl/core';

const deck = new Deck({
  widgets: [new ScaleWidget({placement: 'bottom-left', label: 'Scale'})]
});

Types

ResetViewWidgetProps​

The ResetViewWidget accepts the generic WidgetProps:

  • id (default 'scale') - 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)​

Default: 'Scale'

Tooltip label for the widget.

Source​

modules/widgets/src/scale-widget.tsx