dev-rcfa-memory/fe-digitaltwin-v2/prompts/components/map/prompt.md

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.