Skip to main content

Legend

Legend

Display categorical or gradient legends on the map

Tags: legend key categorical gradient

View Demo

The Legend component displays a visual key for your map data. It supports categorical legends with colored items and continuous gradient legends for numeric data. Legends can be positioned in any corner and optionally made collapsible.

Import​

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

Basic Usage​

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

  const items = [
    { label: 'Parks', color: '#228b22' },
    { label: 'Water', color: '#0066cc' },
    { label: 'Buildings', color: '#888888' },
  ];
</script>

<Map title="Land Use Map" center={[-122.4, 37.8]} zoom={12}>
  <Legend title="Land Use" position="bottom-left" {items} collapsible />
</Map>

Props​

Component-Specific Props​

Prop Type Default Description
title string - Legend title
position 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' 'bottom-left' Legend position
type 'categorical' | 'gradient' 'categorical' Legend type
items LegendItem[] - Items for categorical legends
gradient GradientStop[] - Stops for gradient legends
minLabel string - Min value label for gradient
maxLabel string - Max value label for gradient
collapsible boolean false Allow collapsing
onItemClick (item, index) => void - Item click handler

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
On this page