Skip to main content

LegendGroup

LegendGroup

Accordion-style container for multiple legends with one expanded at a time

Tags: legend accordion group multi-legend

View Demo

The LegendGroup component displays multiple legends in an accordion style where only one is expanded at a time. This saves map space while keeping multiple legend types accessible. Supports both categorical and gradient legends.

Import​

<script>
  import { LegendGroup } from '@classic-homes/maps-svelte';
</script>
// React
import { LegendGroup } from '@classic-homes/maps-react';

Basic Usage​

<script>
  import { Map, LegendGroup } from '@classic-homes/maps-svelte';

  const legends = [
    {
      id: 'land-use',
      title: 'Land Use',
      type: 'categorical',
      items: [
        { label: 'Residential', color: '#f4a460' },
        { label: 'Commercial', color: '#4169e1' },
      ],
    },
    {
      id: 'density',
      title: 'Population Density',
      type: 'gradient',
      gradient: [
        { position: 0, color: '#ffffcc' },
        { position: 1, color: '#081d58' },
      ],
      minLabel: '0/km²',
      maxLabel: '50k/km²',
    },
  ];
</script>

<Map title="Multi-Legend Map" center={[-122.4, 37.8]} zoom={12}>
  <LegendGroup position="bottom-left" {legends} defaultExpanded="land-use" />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
legends LegendConfig[] required Array of legend configurations
position 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' 'bottom-left' Group position
defaultExpanded string - ID of initially expanded legend
expanded string - Controlled expanded state
onExpandedChange (id: string | null) => void - Callback when expansion changes
allowCollapseAll boolean false Allow all legends to be collapsed

Inherited Base Map Props​

Prop Type Default Description
title string required Map title for accessibility (aria-label)
description string - Optional description for screen readers
height number | string 400 Map height in pixels or CSS value
width number | string - Map width in pixels or CSS value
loading boolean false Show loading skeleton
error string | null - Error message to display
emptyMessage string - Message shown when data is empty
theme 'light' | 'dark' | 'auto' 'auto' Theme preference
animation boolean true Enable/disable animations (respects prefers-reduced-motion)
class string - Custom CSS class for styling

Accessibility​

  • The title prop is used as aria-label for screen readers
  • Keyboard navigation support for interactive elements
  • Animations respect prefers-reduced-motion media query
  • High contrast colors in both light and dark modes
  • Legend - Single legend component for categorical or gradient data
  • CoordinateDisplay - Show cursor coordinates and zoom level on the map
On this page