import "@arcgis/map-components/components/arcgis-scale-bar";
The Scale Bar componenent displays a scale bar representing the scale of the map. It respects various coordinate systems and displays units in metric or imperial values. Metric values show either kilometers, meters, centimeters, or millimeters depending on the scale, and likewise, imperial values show miles, feet, or inches depending on the scale. When working with Web Mercator or geographic coordinate systems the scale bar takes into account projection distortion and dynamically adjusts the scale bar.
When the scale bar is inside the map, the actual location of the scale bar is used to calculate the scale. Otherwise, the center of the map is used to calculate the scale.
Known Limitations
- This component is not currently supported within an
arcgis-scene
component.
Demo
Properties
Property | Attribute | Type |
---|---|---|
auto-destroy-disabled | boolean | |
bar-style | "line" | "ruler" | |
icon | string | |
label | string | |
| { componentLabel?: string | undefined; } | |
position | "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing" | |
reference-element | ArcgisLinkChart | ArcgisMap | ArcgisScene | string | |
unit | "dual" | "imperial" | "metric" |
autoDestroyDisabled
autoDestroyDisabled: boolean
If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporary hide it. If this is set, make sure to call the `destroy` method when you are done to prevent memory leaks.
- Attribute
- auto-destroy-disabled
- Default value
- false
barStyle
barStyle: "line" | "ruler"
The style for the scale bar.
When unit
is set to dual
, the style will always be line
.
- Attribute
- bar-style
- Default value
- "line"
icon
icon: string
Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component). Search Calcite Icons for possible values.
- Attribute
- icon
- Default value
- "actual-size"
messageOverrides
messageOverrides: { componentLabel?: string | undefined; }
Replace localized message strings with your own strings.
position
position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"
- Attribute
- position
- Default value
- "top-left"
referenceElement
referenceElement: ArcgisLinkChart | ArcgisMap | ArcgisScene | string
- Attribute
- reference-element
unit
unit: "dual" | "imperial" | "metric"
Units to use for the scale bar.
When using dual
, the scale bar displays both metric and imperial units.
When metric, distances will be shown in either kilometers, meters, centimeters, or millimeters depending on the scale. Similarly, imperial
units will be shown in either miles, feet, or inches.
- Attribute
- unit
Methods
Method | Signature |
---|---|
componentOnReady(): Promise<void> | |
destroy(): Promise<void> |
componentOnReady
componentOnReady(): Promise<void>
Create a promise that resolves once component is fully loaded.
- Returns
- Promise<void>
Events
Event | Type |
---|---|
undefined |