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

Installation

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/widgets

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

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/deck.gl@^9.0.0/dist/stylesheet.css" rel='stylesheet' />
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist.min.js"></script>
<link href="https://unpkg.com/@deck.gl/widgets@^9.0.0/dist/stylesheet.css" rel='stylesheet' />

new deck._ScaleWidget({});

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