# Regions Map (Moonarc)

Where a service runs: the world in dots with each region pinned and pulsing in turn, a chip at each pin with its code and the latency measured there, and under the map the same regions as a list (name, code, figure), so a reader who cannot see the map, or reads on a narrow screen where the chips would crowd, loses nothing. A region still to open is a dashed ring and says so in the list. A few figures can sit beside the heading. Zero JavaScript; the map is core DottedMap.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/regions-map` (license key required)
- Tier B · category section · trigger scroll, always
- Readout: `<RegionsMap regions={[{ code, name, lat, lng, latency }]} />`
- Browser support: widely (Chrome 105 · Firefox 110 · Safari 16); elsewhere: without container queries the chips stay hidden and the list carries every region
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 12.5 kB raw)
- Page: https://moonarc.dev/components/regions-map/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `regions` | `{ code; name; lat; lng; latency?; status?; side? }[]` | none | The regions. code is the short code (fra1), name the city; latency is in ms; status "soon" draws a dashed ring and prints soonLabel in the list; side puts the chip on another side of its pin where two regions are close (top, bottom, left, right). |
| `eyebrow` | `string` | none | A short line above the heading. Slot "eyebrow" wins. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `copy` | `string` | none | A line under the heading. |
| `metric` | `string` | `'Median latency'` | What the figure is, printed over the list. |
| `stats` | `{ value: string; label: string }[]` | none | A few figures beside the heading. |
| `soonLabel` | `string` | `'Opening soon'` | The words in the list for a region still to open. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; on ink and brand the pins take the tone's emphasis colour. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import RegionsMap from '@/components/moonarc/pro/RegionsMap.astro';
---
<RegionsMap
  eyebrow="Regions"
  copy="Requests are answered by the nearest region."
  metric="Median latency from the nearest city"
  stats={[{ value: '6', label: 'regions' }, { value: '38 ms', label: 'median, worldwide' }]}
  regions={[
    { code: 'iad1', name: 'Washington', lat: 38.9, lng: -77, latency: 24 },
    { code: 'fra1', name: 'Frankfurt', lat: 50.1, lng: 8.7, latency: 18 },
    { code: 'sin1', name: 'Singapore', lat: 1.35, lng: 103.8, latency: 31 },
    { code: 'syd1', name: 'Sydney', lat: -33.9, lng: 151.2, status: 'soon' },
  ]}
>
  <span slot="headline">Close to <em>every user</em></span>
</RegionsMap>
```

## Reduced motion

The pins do not pulse and the chips are there at once.

## With ClientRouter

CSS and Reveal; the chips arrive again on a fresh page.

## Craft

- The map keeps DottedMap's own ratio (200 by 78.9: the drawing is cut at 84° N and 58° S), so a chip placed in percentages of the box lands on its dot at every width.
- The chips are for a wide box only. Under 44 rem they would cover each other over Europe, so they hide and the list, which was always there, does the work.
- The map is hidden from assistive technology; the list is the content: name, code and figure in reading order.
- A region still to open is a dashed ring with no figure, so the map never claims a latency nobody has measured.

## Replaces

- Region maps on infrastructure and API landing pages
- World map with locations (Aceternity)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/regions-map` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: dotted-map, reveal.