Legend Panel

An interactive map application contains a legend panel component, which displays and manages a LegendView based on the map content sources active on the interactive map. By default, a legend panel is toggleable and collapsed since it’s secondary information and can overlap large visible regions of the interactive map depending on the active layers and viewport size.

Example legend panel
Example legend panel


The following options are supported when configuring your LegendPanel instance:

Option Type Description Default
legend object Configuration for the legend view. Refer to the Legend View usage documentation for the list of supported configuration options and defaults.
title string Label title for the panel. The title is only rendered if the panel is toggleable and in the expanded state.
className string A CSS class name to add to the panel, which can be used for additional style customizations.
toggleable boolean A boolean value indicating whether the panel is toggleable. A toggleable panel will display a button in the closed/collapsed state initially. Clicking on the button will expand the panel to its full size. true
icon string Icon HTML to display in the button when the panel is collapsed. This value can be any valid HTML, including an <img> or <svg> element.
position object Options to configure the position of the panel within its parent container.
position.pin string The position to pin the panel to relative to its parent container. Supports topleft, top, topright, left, center, right, bottomleft, bottom, or bottomleft.
position.translate IPoint Amount to translate the panel in the x and y axis relative to its pinned position. { x: 0, y: 0 }

Default Configuration

The following is the default configuration object for a LegendPanel instance:

    legend: {
        size: {
            width: 300
        styles: {
            label: {
                color: '#ffffff'

Also review the default configuration for an InteractiveMapApp instance that is applied to its internal legend panel.

Last modified: May 09, 2019