# Reusable MapCN Component Prompt

Create or update a geospatial visualization using the project-owned MapCN
component in `src/shared/components/ui/map.tsx`.

## React composition contract

- Root: `Map`, configured with typed MapLibre options.
- Choose only the required children: `MapMarker`, `MarkerContent`,
  `MarkerPopup`, `MarkerTooltip`, `MarkerLabel`, `MapControls`, `MapRoute`,
  `MapArc`, `MapGeoJSON`, or `MapClusterLayer`.
- Data enters through typed props; fetching, auth, and routing remain in the
  feature container.
- Use controlled `viewport` and `onViewportChange` only when another part of the
  UI must own map position.

## Styling theme: operational geography

- Match semantic project surfaces, borders, typography, and light/dark mode.
- Keep markers legible over both basemap themes.
- Use status color together with text, shape, or icons.
- Popups should be concise, scannable, and keyboard reachable.
- Controls should not obscure critical features on small screens.
- Prefer the built-in CARTO style unless the feature requires another
  MapLibre-compatible source.

## Request

- **Purpose:** `<What geographic decision or relationship the map explains>`
- **Initial viewport:** `<Center, zoom, pitch, and bearing>`
- **Data/layers:** `<Markers, route, arc, GeoJSON, or clusters>`
- **Interactions:** `<Hover, click, select, drag, locate, or fullscreen>`
- **Loading/empty/error states:** `<Expected behavior>`
- **Mobile behavior:** `<Control placement and supporting content>`

## Acceptance criteria

1. The visualization composes the existing MapCN source instead of adding
   another map wrapper.
2. Coordinates and GeoJSON are explicitly typed and validated at the boundary.
3. Loading, unavailable tiles/data, empty results, and selected features are
   understandable.
4. Keyboard focus, popup labels, contrast, and reduced motion are addressed.
5. Light/dark theme changes do not require remounting feature state.

Run focused verification allowed by `agents.md` and finish with a simple
**TL;DR**.