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

If you're creating a LegendPanel instance directly, such as for use outside of InteractiveMapApp, use the following code to create a legend control and link it with your InteractiveMap instance:

const target = document.getElementById('map-legend');
 
// custom configuration options for the panel
const panelConfig = {}; 
 
// account info is needed to request alert-related data from the API for the alerts legend
const account = aeris.account();
 
const panel = new LegendPanel(panelConfig);
panel.addTo(target);
 
// `map` is an instance of InteractiveMap
// add and remove legends when layers are added and/or removed from the map
map.on('layer:add', (e) => {
    const { layer, id } = e.data || {};
    const keys = layer || id;
    if (keys) {
        // some keys contain multiple layers, so add a legend for each as needed
        const layers = keys.replace(/\:[^,]+/g, '').split(',');
        layers.forEach((code) => {
            panel.legend.add(code, {
                account: account
            });
            
            // the "alerts" legend requires the current map bounds
            if (code === 'alerts' || /^alerts-/.test(code)) {
                setTimeout(() => {
                    panel.legend.update({
                        account: account,
                        within: {
                            bounds: map.getBounds()
                        }
                    });
                }, 500);
            }
        });
    }
}).on('layer:remove source:remove', (e) => {
    const { layer, id } = e.data || {};
    const keys = layer || id;
    if (keys) {
        // some keys contain multiple layers, so remove the legend for each as needed
        const layers = keys.replace(/\:[^,]+/g, '').split(',');
        layers.forEach((code) => {
            panel.legend.remove(code);
        });
    }
}).on('change:bounds', (e) => {
    const opts = { account: account };
    
    // if active layers contains `alerts`, we need to pass the maps current bounds, size 
    // and zoom to be used to request a filtered version of the advisories legend just 
    // for the map region
    opts.within = {
        bounds: map.getBounds()
    };
    panel.legend.update(opts);
});

If you're using an instance of InteractiveMapApp, you don't have to use the above code since the legend panel is already instantiated and managed for you.

Configuration

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.

Info Panel Place Search Panel