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

Basic legend — traffic conditions

Route legend — Air vs. Sea arcs

All four corner positions

Heatmap density legend with CSS color values

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.