ScaleWidget (Experimental)

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.

JavaScript

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'})
  ]
});

TypeScript

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'})
  ]
});

React

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

The ScaleWidget accepts the generic WidgetProps and:

label (string, optional)

• Default: 'Scale'

Tooltip label for the widget.

Source

modules/widgets/src/scale-widget.tsx