Data Display

MapLegend

Key to the marker states of a map, drawn with the same shapes as the markers, and a map attribution that is always rendered, defaulting to the OpenStreetMap and ODbL credit.

import { MapLegend } from '@lostgradient/cinder';
maplegendattribution
01

Overview

Reference usage

MapLegend is the key to a map's marker states, each drawn in the marker's own shape so colour is never the only signal. Under the key it always renders the map attribution. Left unset, the attribution is the OpenStreetMap and ODbL credit; pass an attribution snippet to name a different basemap's credit. Every map surface must render it.

Usage

svelte 
<script lang="ts">
  import { MapLegend } from '@lostgradient/cinder';
</script>

<MapLegend
  label="Map key"
  items={[
    { state: 'live', label: 'Happy hour now' },
    { state: 'idle', label: 'Starts later' },
  ]}
/>
Live preview

Key with the default attribution

  • Happy hour now
  • Starts later
  • Selected
  • Several places

© OpenStreetMap contributors, ODbL

02

When to use

Use when
  • Explaining what live, idle, selected and cluster markers mean on a map.
  • Rendering the basemap credit that every map surface must show.
Avoid when
  • Showing a chart key — use the chart's own legend.
03

Examples

Key with the default attribution

Each state is drawn in its marker's shape. The OpenStreetMap and ODbL credit is always rendered under the key.

04

Props

Props for map-legend
Name
Type
Default
Description
items required MapLegendItem[] The marker states the map uses, in reading order.
label text Accessible name of the legend, such as "Map key". Left unset, the legend is unnamed.
attribution snippet Replaces the attribution text. It is always rendered; leave it unset for the OpenStreetMap and ODbL credit.