VS-07 — [Map Core v1 ] Base Map + H3 Stress Score Layer #43

What to build

Mapbox GL JS embedded in React under src/map/. The frontend calculates the viewport bbox and passes it to the at-risk endpoint, which returns H3 zone polygons + their stress scores. Zones are rendered as a GeoJSON choropleth. Geometry comes from the API — no h3-js needed.

API
GET /v1/zones/at-risk?bbox={min_lng},{min_lat},{max_lng},{max_lat}&limit=200
Response per zone: zone_id, score_global, geometry (GeoJSON Polygon). Hard limit: 200 zones/request.

Acceptance criteria

• Mapbox initialized in src/map/components/MapView.tsx
• Viewport bbox extracted from Mapbox bounds on moveend, debounced 400ms
• Zones rendered as GeoJSON fill layer, colored by score_global (5-step scale: green → yellow → red)
• Clicking a zone dispatches its zone_id to useMapStore
• Loading spinner during fetch; error banner on failure
• No map logic outside src/map/
• Map works against mocked at-risk response (real GeoJSON shapes)

Blocked by

VS-03 Tailwind + Design Token Foundation
VS-02 React + TypeScript + Quality Baseline