# MapLegend

Source: https://lumeo.nativ.sh/components/map-legend

# MapLegend

A small overlay panel that explains the symbols and colours used on a map. Place MapLegend inside the Map Overlay slot; nest MapLegendItem children to define rows.

**Satellite package.** `MapLegend` and `MapLegendItem` live in `Lumeo.Maps` — install it alongside the core `Lumeo` package.

## When to Use

-   Explaining fill colours on a choropleth or density map
-   Labelling marker categories (e.g., store types, risk levels)
-   Distinguishing route types — air vs. sea, fastest vs. scenic
-   Identifying threshold bands on a heatmap

Preview Code

Basic legend — traffic conditions

Copy Code

Preview Code

Route legend — Air vs. Sea arcs

Copy Code

Preview Code

All four corner positions

Copy Code

Preview Code

Heatmap density legend with CSS color values

Copy Code

## API Reference

### MapLegend

Prop

Type

Default

Description

Title

string?

null

Optional heading shown in bold above the legend rows.

Position

string

"bottom-left"

Corner shorthand. Accepted values: `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`. Custom Tailwind position classes can be applied via `Class`.

ChildContent

RenderFragment?

null

One or more `MapLegendItem` children.

Class

string?

null

Extra Tailwind classes applied to the legend container.

### MapLegendItem

Prop

Type

Default

Description

Color

string?

null

Dot fill color. Friendly names (`red`, `green`, `blue`, `yellow`, `orange`, `teal`, `purple`, `pink`, `rose`, `amber`, `sky`, `cyan`, `emerald`, `violet`, `gray`, `slate`) or any CSS color value. Null = theme primary.

Label

string?

null

Text label displayed to the right of the colored dot.

Class

string?

null

Extra Tailwind classes on the row container.