Legend
Controls & OverlaysDisplay categorical or gradient legends on the map
legendkeycategoricalgradient
Demo
Legend Demo - Land Use & Density. Interactive map centered at 37.77 degrees N, 122.44 degrees W at zoom level 12. Use keyboard to navigate.
Legend Mode
Individual: Separate Legend components
Legend Position
Gradient Legend
Active Categories
5 of 5 selected
Click legend items on the map to toggle visibility
Categorical Legend
Shows discrete categories with distinct colors. Ideal for land use, categories, or status types. Click items to toggle layer visibility.
Residential Commercial Industrial Parks Water
Gradient Legend
Shows continuous data ranges with color gradients. Perfect for population density, temperature, elevation, or any numeric scale.
Density:
Temperature:
LegendGroup
Accordion-style container for multiple legends. Only one legend is expanded at a time, saving map space while keeping all legends accessible.
<LegendGroup
legends={[...]}
expanded="land-use"
/>Legend Features:
- Categorical legends with color swatches and optional values
- Gradient legends for continuous data with customizable color stops
- Interactive legends - click items to toggle layer visibility
- Collapsible legends to save map space
- Configurable position (all four corners)
- Dark mode support with automatic styling
- LegendGroup: Accordion-style container for multiple legends with one expanded at a time
Usage
import { Legend } from '@classic-homes/maps-svelte';
// or for React:
import { Legend } from '@classic-homes/maps-react';