Data Display

MapMarker

Anchored map pin button with live, idle, selected and cluster states, a visible label so state is never colour alone, and a target of at least 44px.

import { MapMarker } from '@lostgradient/cinder';
mapmarkerpin
01

Overview

Reference usage

MapMarker is an anchored pin for a map you render yourself: a pill over a 10px rotated square whose point marks the place. It has four states. live is a filled pill with a dot, idle is an outlined pill that shows a start time or glyph, selected is raised with a ring, and cluster is a round count with no tail. State is never carried by colour alone, and the button is at least 44px in both directions.

MapMarker does not choose a map library or basemap. Position it over the map at the point its tail marks. A map that draws markers must also render MapLegend's attribution.

Usage

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

<MapMarker state="idle" label="8 pm" name="Larimer Taproom, happy hour starts 8 pm" />
Live preview

Live, idle, selected and cluster

02

When to use

Use when
  • Placing a place or a group of places on a map you render yourself, with the map library of your choice.
  • Showing which pin is selected with a raised pill and a ring.
Avoid when
  • Showing a status next to text outside a map — use status-dot.
  • Explaining the marker states — use map-legend.
03

Examples

Live, idle, selected and cluster

Idle shows its start time, live is a filled pill with a dot, selected is raised with a ring, and a cluster is a round count. Each is at least 44px.

04

Props

Props for map-marker
Name
Type
Default
Description
state 'live' | 'idle' | 'selected' | 'cluster' 'idle' The marker's state. live is a filled pill with a dot, idle an outlined pill, selected a raised pill with a ring, and cluster a round count with no tail. Defaults to idle.
label required text Visible text: a start time such as "8 pm" for an idle marker, a short word for a live one, or the count for a cluster. State is never carried by colour alone.
icon snippet Decorative glyph drawn before the label. It is hidden from assistive technology.
name text Accessible name of the marker, such as "Union Station Bar, happy hour starts 8 pm". Left unset, the label is the name and the state is appended as hidden text.