How ffferncake/mapbox-direction-migration works
This is a map-based situation and route-planning application. Users inspect a Mapbox map, toggle incident, hospital, weather, and cyclone overlays, and compare driving routes against traffic-incident buffers; the navigation panel shows route-safety results and map coordinates. The map and layer stores hold shared state. The README is only a Next.js starter and documents no further product capabilities. Some subsystem wiring is unsampled, so uncertain connections are omitted or marked dashed.
Main entry points: IncidentLayer.tsx Incident and overlays · page.tsx Interactive map · layout.tsx Application shell · layerStore.ts Layer state
Components 17
Map Interface
- Application shell
app/layout.tsx - Header
app/_components/feature/Header/Header.tsx - Interactive map
app/page.tsx - Layer handler
app/ClientLayerHandler.tsx - Layer navigation
app/_components/feature/LeftNav/LeftNav.tsx
Shared State
- Map state
app/provider/mapStore.ts - Layer state
app/provider/layerStore.ts
Route and Hazard Analysis
- Incident and overlays
app/_components/feature/LeftNav/_component/IncidentLayer.tsx - Route obstacle check
app/page.tsx - Cyclone forecast rendering
app/lib/typhoon.ts
External Data
- KMA proxy
app/api/kma-proxy/route.ts - Mapbox map and directions
- Traffic incident feed
- Hospital GeoJSON
- Weather map tiles
- KMA forecast service
Other components
- Map user
Connections 22
- Map user → Application shell: opens app
app/layout.tsx - Application shell → Header: renders
app/layout.tsx - Application shell → Interactive map: renders page
app/layout.tsx - Application shell → Layer handler: renders
app/layout.tsx - Layer handler → Layer navigation: renders
app/ClientLayerHandler.tsx - Layer handler → Incident and overlays: renders
app/ClientLayerHandler.tsx - Layer navigation → Layer state: reads and updates
app/_components/feature/LeftNav/LeftNav.tsx - Layer navigation → Map state: reads map status
app/_components/feature/LeftNav/LeftNav.tsx - Interactive map → Map state: sets map status
app/page.tsx - Interactive map → Layer state: reads incidents; saves reports
app/page.tsx - Incident and overlays → Map state: reads map
app/_components/feature/LeftNav/_component/IncidentLayer.tsx - Incident and overlays → Layer state: reads toggles; saves incidents
app/_components/feature/LeftNav/_component/IncidentLayer.tsx - Interactive map → Mapbox map and directions: creates map and directions
app/page.tsx - Interactive map → Route obstacle check: checks route hazards
app/page.tsx - Route obstacle check → Layer state: stores reports
app/page.tsx - Incident and overlays → Traffic incident feed: fetches incidents
- Incident and overlays → Hospital GeoJSON: loads GeoJSON
app/_components/feature/LeftNav/_component/IncidentLayer.tsx - Incident and overlays → Weather map tiles: loads raster tiles
app/_components/feature/LeftNav/_component/IncidentLayer.tsx - Incident and overlays → Cyclone forecast rendering: may invoke renderer
app/_components/feature/LeftNav/_component/IncidentLayer.tsx - Cyclone forecast rendering → KMA proxy: fetches forecast
app/lib/typhoon.ts - KMA proxy → KMA forecast service: fetches forecast text
app/api/kma-proxy/route.ts - Cyclone forecast rendering → Mapbox map and directions: adds map layers
app/lib/typhoon.ts