LegendGroup
Controls & OverlaysAccordion-style container for multiple legends with one expanded at a time
legendaccordiongroupmulti-legend
Demo
Legend Group Demo - Accordion Legends. Interactive map centered at 37.77 degrees N, 122.44 degrees W at zoom level 12. Use keyboard to navigate.
Legend Position
Expanded Legend
Active Categories
5 of 5 selected
Click legend items on the map to toggle visibility
Accordion Behavior
The LegendGroup displays multiple legends in an accordion style. Only one legend is expanded at a time, saving map space while keeping all information accessible.
- Click headers to switch between legends
- Smooth expand/collapse transitions
- Single container with vertical stacking support
Configuration
Each legend in the group can be categorical (items) or gradient (continuous scale). The legends prop accepts an array of legend configurations.
legends={[
{ id: 'land-use', title: 'Land Use', type: 'categorical', items: [...] },
{ id: 'density', title: 'Density', type: 'gradient', gradient: [...] }
]}LegendGroup Features:
- Accordion-style legend container with single expanded legend
- Support for both categorical and gradient legends within the same group
- Controlled or uncontrolled expansion state
- Optional allowCollapseAll mode
- Interactive items with click handlers
- Automatic height re-registration for proper stacking with other controls
Usage
import { LegendGroup } from '@classic-homes/maps-svelte';
// or for React:
import { LegendGroup } from '@classic-homes/maps-react';