RAPIDA UI

Map Organism

Container for the MapLibre GL damage map. Provides zoom controls, layer toggles, a damage-level legend, and Map Pin molecules for each report. Currently renders a styled placeholder until MapLibre JS is integrated.

Preview — Default Height (500px)

Damage Level

Minimal
Partial
Complete

Preview — Custom Height (300px)

Damage Level

Minimal
Partial
Complete

Molecules & Atoms Composed

  • x-molecules.map-pin — Damage-colored map markers
  • x-atoms.button — Zoom in, zoom out, layer toggle
  • x-atoms.icon — Map placeholder icon

Accessibility

  • Uses role="region" with descriptive label for the map area.
  • Zoom and layer controls have explicit aria-label attributes.
  • Map pins use role="img" with damage level descriptions.
  • Legend uses text labels alongside color indicators — never color alone.

Trauma-Informed Design

  • Map has a contained, bounded area — damage visuals do not spill into surrounding UI.
  • Neutral placeholder colors prevent distress when the map is loading.
  • Pin pulsing animation is subtle and can be disabled via motion-reduce.