# Maproom — The Sundered Isles Atlas

## Prompt

Build a single-file interactive maproom HTML artifact (no external images, no build step) for a fictional ocean region called "The Sundered Isles" in the Azurean Sea. The maproom must feel authored — not like a tile-map widget — and deliver layered cartography, filters, annotations, and place-driven storytelling.

## Atlas brief

**Region**: The Sundered Isles — an archipelago in the Azurean Sea. Ten named locations span volcanic islands, deep-sea trenches, coral reefs, trade routes, shipwreck fields, research outposts, protected sanctuaries, and unexplored margins.

**Scale**: The mapped region is roughly 1,600 × 1,200 nautical miles. The SVG paint area shall be 1,600 × 1,200 internal units, displayed in a pannable/zoomable viewport.

## Layer set (5 layers)

| Layer | Name | Default | Content |
|---|---|---|---|
| 0 | Bathymetric Base | on (locked) | Ocean depth shading, landmasses, trench contours |
| 1 | Trade Routes | on | Historical spice routes, modern shipping lanes |
| 2 | Research Network | off | Research stations, survey expedition paths, instrument buoys |
| 3 | Storms & Currents | off | Prevailing current arrows, seasonal storm tracks, weather outposts |
| 4 | Hazards & Wrecks | off | Shipwreck sites, reef dangers, volcanic hazard zones |

## Location detail panel

Each of the 10 locations opens a detail card with:
- Name, coordinates, elevation/depth
- A short narrative paragraph (50–80 words)
- Classification tags (port, reef, trench, wreck, research, volcano, sanctuary, etc.)
- Year first charted or established

## Navigation model

- **Pan**: Mouse drag, touch drag (two-finger pan), arrow keys, WASD
- **Zoom**: Mouse wheel, pinch-to-zoom, +/- keys, on-screen zoom controls
- **Fit-to-bounds**: Double-click a location marker to center it
- **Mini-map**: A corner minimap showing the current viewport rectangle

## Guided tour — "The Cartographer's Expedition"

A sequential narrative route following the path of the research vessel *Eidolon* through 8 stops:

1. **Port Lumina** — Departure from the trading hub
2. **Whisper Reef** — Coral survey and marine biodiversity cataloguing
3. **Sanctuary Bay** — Protected waters, spawning grounds observation
4. **Caldera's Wake** — Geothermal vent sampling near the volcanic island
5. **Siren's Teeth** — Shipwreck archaeology along the rocky outcrops
6. **Observatory Spire** — High-altitude atmospheric measurements
7. **Gale Point** — Storm tracking from the weather outpost
8. **The Trench of Storms** — Deep-sea bathymetry, final survey leg

Tour controls: Next/Prev buttons, a progress indicator, and a "skip to location" dropdown. Tour locations highlight sequentially with pulsing markers and connecting dashed path segments.

## Visual direction

- Colour palette: Deep navy/teal ocean (#0a1628), illuminated by a warm cartographic gold (#d4a853) for markers and routes. Landmasses in subtle olive-moss (#3a4a32). Depth shading in layered blue gradients. Storm tracks in muted violet. Hazard markers in rust red.
- Typography: System sans-serif stack. Location labels in small caps with a slight letter-spacing.
- The map should evoke a 19th-century admiralty chart reimagined with modern data layers — weathered but precise.
- Legends and overlays must stay readable against any base map region.
- Dark mode: The maproom defaults to a dark nautical theme and includes a light-mode toggle.

## Systems floor

- Single `.html` with inline CSS and JS.
- SVG-based cartography — no external tile servers needed.
- Use `localStorage` to persist visited locations, layer visibility preferences, and the current tour stop.
- Keyboard shortcuts: `L` toggle legend, `F` toggle filters panel, `T` start/restart tour, `Esc` close panels.
- Mobile-friendly: touch pan/zoom work, the detail panel collapses to a bottom sheet on narrow viewports.
- Minimap in the bottom-right corner.

## Quality bar

- The map must feel authored, not like random blobs under tooltips.
- Every annotated location must have a crafted narrative snippet.
- The tour must provide a genuine sense of journey with connecting path segments.
- Legends and overlays must stay readable against all map regions.
- Mobile mode must support pan and zoom without accidental frustration.