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.

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:

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: November 16, 2020