Legend

ESM:

Use dark colors for code blocksCopy
import "@arcgis/map-components/components/arcgis-legend";

CDN:

No specific import is needed for this component.

The Legend component describes the symbols used to represent layers in a map.

Demo

Properties

Property	Attribute	Type
`activeLayerInfos`		`Collection<ActiveLayerInfo>`
`autoDestroyDisabled`	`auto-destroy-disabled`	`boolean`
`basemapLegendVisible`	`basemap-legend-visible`	`boolean`
`headingLevel`	`heading-level`	`number`
`hideLayersNotInCurrentView`	`hide-layers-not-in-current-view`	`boolean`
`icon`	`icon`	`string`
`label`	`label`	`string`
`layerInfos`		`Array<LegendLayerInfos>`
`legendStyle`	`legend-style`	`LegendStyle \| string`
`position`	`position`	`"bottom-leading" \| "bottom-left" \| "bottom-right" \| "bottom-trailing" \| "manual" \| "top-leading" \| "top-left" \| "top-right" \| "top-trailing"`
`referenceElement`	`reference-element`	`HTMLArcgisLinkChartElement \| HTMLArcgisMapElement \| HTMLArcgisSceneElement \| string`
`respectLayerDefinitionExpression`	`respect-layer-definition-expression`	`boolean`
`respectLayerVisibilityDisabled`	`respect-layer-visibility-disabled`	`boolean`
`state` readonly	`state`	`"disabled" \| "ready"`

activeLayerInfos

Property

activeLayerInfos: Collection<ActiveLayerInfo>

Collection of ActiveLayerInfo objects used by the legend view to display data in the legend.

autoDestroyDisabled

Property

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 temporarily 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

basemapLegendVisible

Property

basemapLegendVisible: boolean

Indicates whether to show the Basemap layers in the Legend.

Attribute: basemap-legend-visible
Default value: false

headingLevel

Property

headingLevel: number

Indicates the heading level to use for the legend title.

Attribute: heading-level
Default value: 3

hideLayersNotInCurrentView

Property

hideLayersNotInCurrentView: boolean

When true, layers will only be shown in the legend if they are visible in the view's extent.

Attribute: hide-layers-not-in-current-view
Default value: false

icon

Property

icon: string

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

Calcite Icons

Attribute: icon
Default value: "legend"

label

Property

label: string

The widget's default label.

Attribute: label

layerInfos

Property

layerInfos: Array<LegendLayerInfos>

Specifies a subset of the layers to display in the legend.

legendStyle

Property

legendStyle: LegendStyle | string

Indicates the style of the legend.

Attribute: legend-style
Default value: "classic"

position

Property

position: "bottom-leading" | "bottom-left" | "bottom-right" | "bottom-trailing" | "manual" | "top-leading" | "top-left" | "top-right" | "top-trailing"

Attribute: position
Default value: "bottom-left"

referenceElement

Property

referenceElement: HTMLArcgisLinkChartElement | HTMLArcgisMapElement | HTMLArcgisSceneElement | string

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

Associate components with a Map or Scene component

Attribute: reference-element

respectLayerDefinitionExpression

Property

respectLayerDefinitionExpression: boolean

If a layer uses a unique value render, only features that satisfy the layer's definition expression will be displayed in the legend when set to true.

Attribute: respect-layer-definition-expression
Default value: false

respectLayerVisibilityDisabled

Property

respectLayerVisibilityDisabled: boolean

Determines whether to respect the properties of the layers in the map that control the legend's visibility (minScale, maxScale, legendEnabled).

Attribute: respect-layer-visibility-disabled
Default value: false

state

readonly

Property

state: "disabled" | "ready"

The current state of the component.

Attribute: state
Default value: "disabled"

Slots

No slots to display.

Events

Event	Type
`arcgisPropertyChange`	`CustomEvent<{ name: "state"; }>`
`arcgisReady`	`CustomEvent<void>`

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "state"; }>

Emitted when the value of a property is changed. Use this to listen to changes to properties.

arcgisReady

Event

arcgisReady: CustomEvent<void>

Emitted when the component associated with a map or scene view is is ready to be interacted with.

Methods

Method	Signature
`componentOnReady`	`componentOnReady(): Promise<void>`
`destroy`	`destroy(): Promise<void>`

componentOnReady

Method

componentOnReady(): Promise<void>

Create a promise that resolves once component is fully loaded.

Example

Use dark colors for code blocksCopy
const arcgisLegend = document.querySelector("arcgis-legend");
document.body.append(arcgisLegend);
await arcgisLegend.componentOnReady();
console.log("arcgis-legend is ready to go!");

Returns: Promise<void>

destroy

Method

destroy(): Promise<void>

Permanently destroy the component.

Returns: Promise<void>