docs/api-reference/widgets/scale-widget.md
import {ScaleWidgetDemo} from '@site/src/doc-demos/widgets'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
<ScaleWidgetDemo />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.
<Tabs groupId="language"> <TabItem value="js" label="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'})
]
});
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>
);
}
import {_ScaleWidget as ScaleWidget, type ScaleWidgetProps} from '@deck.gl/widgets';
new ScaleWidget({} satisfies ScaleWidgetProps);
ScaleWidgetProps {#scalewidgetprops}The ScaleWidget accepts the generic WidgetProps and:
label (string, optional) {#label}'Scale'Tooltip label for the widget.