Legend

Collection of ActiveLayerInfo objects used by the legend view to display data in the legend. The legend component watches this property to hide or display the layer's legend when an ActiveLayerInfo is removed from or added to this collection.

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

Indicates whether to show the Basemap layers in the Legend. If you set this property to true and specify layerInfos that include the basemap layers, the basemap will be displayed in the legend.

Example

Show basemap layers in the legend

1
2
3
4
5
const mapElement = document.querySelector("arcgis-map");
const basemapLayer = mapElement.map.basemap.baseLayers.getItemAt(0);
const legend = document.querySelector("arcgis-legend");
legend.layerInfos = [{ layer: basemapLayer }];
legend.basemapLegendVisible = true;

Attribute

basemap-legend-visible

Default value

false

Indicates the layout of the legend when the legendStyle is set to the string value of "card". The layout determines how the legend's content is arranged.

Example

Renders the legend in the card style with a "stack" layout

1
<arcgis-legend legend-style="card" card-style-layout="stack"></arcgis-legend>

1
2
3
const legend = document.querySelector("arcgis-legend");
legend.legendStyle = "card";
legend.cardStyleLayout = "stack";

Attribute

card-style-layout

Indicates the heading level to use for the legend title. By default, legend titles are rendered as level 3 headings (e.g. <h3>Legend title</h3>). Depending on the legend placement in your app, you may need to adjust this heading for proper semantics. This is important for meeting accessibility standards.

See also

• Heading Elements

Example

Legend title will render as an <h2>

1
<arcgis-legend heading-level="2"></arcgis-legend>

1
document.querySelector("arcgis-legend").headingLevel = 2;

Attribute

heading-level

Default value

3

When true, layers will only be shown in the legend if they are visible in the view's extent. When data from a layer is not visible in the view, the layer's legend information will be hidden. Only layers that implement the createQuery() and queryFeatureCount() methods are supported by hideLayersNotInCurrentView.

To hide layers completely from the legend, you should set the legendEnabled property of the layer to false.

See also

• ignoreLayerVisibility

Example

Layers not displayed in the current map extent will not be shown in the legend

1
<arcgis-legend hide-layers-not-in-current-view></arcgis-legend>

1
document.querySelector("arcgis-legend").hideLayersNotInCurrentView = true;

Attribute

hide-layers-not-in-current-view

Default value

false

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"

Determines whether to respect the properties of the layers in the map that control the legend's visibility (minScale, maxScale, legendEnabled). By default, a layer's legend elements will not render in the legend given the following conditions:

• The layer's legendEnabled property is set to false.
• If the view's scale is outside the visibility range defined by the layer's minScale and maxScale properties.

When the ignoreLayerVisibility property of the legend is set to true, the legend elements for each layer in the map will always display, thus disregarding the minScale, maxScale, and legendEnabled properties for each layer in the map.

See also

• hideLayersNotInCurrentView

Example

Always displays legend elements for the map's layers regardless of their minScale, maxScale, and legendEnabled properties.

1
<arcgis-legend ignore-layer-visibility></arcgis-legend>

1
document.querySelector("arcgis-legend").ignoreLayerVisibility = true;

Attribute

ignore-layer-visibility

Default value

false

The component's default label.

Attribute

label

Default value

"Legend"

Specifies a subset of the layers to display in the legend. This includes any basemap layers you want to be visible in the legend. If this property is not set, all layers in the map will display in the legend, including basemap layers if basemapLegendVisible is true. Objects in this array are defined with the properties in the example below.

Example

Only show a specific sublayer in the legend

1
2
3
4
5
6
7
8
9
10
const subtypeGroupLayer = webmap.layers.getItemAt(0);
const subtypeSubLayer = subtypeGroupLayer.sublayers.getItemAt(1);
const subtypeSublayerId = parseInt(subtypeSubLayer.subtypeCode);
document.querySelector("arcgis-legend").layerInfos = [
  {
    layer: subtypeGroupLayer,
    sublayerIds: [subtypeSublayerId]
  }
];
});

Indicates the style of the legend. The style determines the legend's layout and behavior. You can either specify a string or an object to indicate the style. The known string values are the same values listed in the table within the type property.

See also

• cardStyleLayout

Example

Renders the legend in the card style with a stack layout

1
2
3
4
document.querySelector("arcgis-legend").legendStyle = {
  type: "card",
  layout: "stack"
};

Attribute

legend-style

Default value

"classic"

Indicates whether the legend is currently loading.

Attribute

loading

Default value

false

Replace localized message strings with your own strings.

Note: Individual message keys may change between releases.

Attribute

position

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

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

See also

• definitionExpression

Example

Only display features that satisfy the layer's definitionExpression.

1
<arcgis-legend respect-layer-definition-expression></arcgis-legend>

1
document.querySelector("arcgis-legend").respectLayerDefinitionExpression = true;

Attribute

respect-layer-definition-expression

Default value

false

Determines whether to respect the properties of the layers in the map that control the legend's visibility (minScale, maxScale, legendEnabled). By default, a layer's legend elements will not render in the legend given the following conditions:

• The layer's legendEnabled property is set to false.
• If the view's scale is outside the visibility range defined by the layer's minScale and maxScale properties.

When the respectLayerVisibilityDisabled property of the legend is set to false, the legend elements for each layer in the map will always display, thus disregarding the minScale, maxScale, and legendEnabled properties for each layer in the map.

See also

• ignoreLayerVisibility

Example

Always displays legend elements for the map's layers regardless of their minScale, maxScale, and legendEnabled properties.

1
<arcgis-legend respect-layer-visibility-disabled="false"></arcgis-legend>

1
document.querySelector("arcgis-legend").respectLayerVisibilityDisabled = true;

Attribute

respect-layer-visibility-disabled

Default value

false

The current state of the component.

Attribute

state

Default value

"disabled"

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Legend component will be associated with a map or scene component rather than using the view property.

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisLegend = document.querySelector("arcgis-legend");
document.body.append(arcgisLegend);
await arcgisLegend.componentOnReady();
console.log("arcgis-legend is ready to go!");

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

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

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