You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
2.0 KiB
Markdown
48 lines
2.0 KiB
Markdown
# 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**.
|