ScaleWidget (Experimental)

March 13, 2026 ยท View on GitHub

from v9.2

import {ScaleWidgetDemo} from '@site/src/doc-demos/widgets'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

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';
import '@deck.gl/widgets/stylesheet.css';

new Deck({
  widgets: [
    new ScaleWidget({placement: 'top-left'})
  ]
});

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

new Deck({
  widgets: [
    new ScaleWidget({placement: 'top-left'})
  ]
});

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

function App() {
  return (
    <DeckGL>
      <ScaleWidget placement="top-left" />
    </DeckGL>
  );
}

Constructor

import {_ScaleWidget as ScaleWidget, type ScaleWidgetProps} from '@deck.gl/widgets';
new ScaleWidget({} satisfies ScaleWidgetProps);

Types

ScaleWidgetProps {#scalewidgetprops}

The ScaleWidget accepts the generic WidgetProps and:

label (string, optional) {#label}

  • Default: 'Scale'

Tooltip label for the widget.

Source

modules/widgets/src/scale-widget.tsx