# ffferncake/mapbox-direction-migration architecture

> Architecture diagram of the GitHub repository ffferncake/mapbox-direction-migration, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ffferncake/mapbox-direction-migration
- Repository: https://github.com/ffferncake/mapbox-direction-migration

## Overview

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: [`app/_components/feature/LeftNav/_component/IncidentLayer.tsx`](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/LeftNav/_component/IncidentLayer.tsx) (Incident and overlays), [`app/page.tsx`](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/page.tsx) (Interactive map), [`app/layout.tsx`](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/layout.tsx) (Application shell), [`app/provider/layerStore.ts`](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/provider/layerStore.ts) (Layer state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Map Interface"]
  node_layout["Application shell<br/>[layout.tsx]"]
  node_header["Header<br/>[Header.tsx]"]
  node_map["Interactive map<br/>[page.tsx]"]
  node_layerhandler["Layer handler"]
  node_nav["Layer navigation<br/>[LeftNav.tsx]"]
end

subgraph group_state["Shared State"]
  node_mapstate["Map state<br/>[mapStore.ts]"]
  node_layerstate["Layer state<br/>[layerStore.ts]"]
end

subgraph group_analysis["Route and Hazard Analysis"]
  node_incidentlayer["Incident and overlays<br/>[IncidentLayer.tsx]"]
  node_routecheck["Route obstacle check<br/>[page.tsx]"]
  node_cyclone["Cyclone forecast rendering<br/>[typhoon.ts]"]
end

subgraph group_feeds["External Data"]
  node_kmaproxy["KMA proxy<br/>[route.ts]"]
  node_mapbox["Mapbox map and directions"]
  node_incidentfeed["Traffic incident feed"]
  node_hospitaldata[("Hospital GeoJSON")]
  node_weatherlayers["Weather map tiles"]
  node_kma["KMA forecast service"]
end

node_user(("Map user"))

node_user -->|"opens app"| node_layout
node_layout -->|"renders"| node_header
node_layout -->|"renders page"| node_map
node_layout -->|"renders"| node_layerhandler
node_layerhandler -->|"renders"| node_nav
node_layerhandler -->|"renders"| node_incidentlayer
node_nav -->|"reads and updates"| node_layerstate
node_nav -->|"reads map status"| node_mapstate
node_map -->|"sets map status"| node_mapstate
node_map -->|"reads incidents; saves reports"| node_layerstate
node_incidentlayer -->|"reads map"| node_mapstate
node_incidentlayer -->|"reads toggles; saves incidents"| node_layerstate
node_map -->|"creates map and directions"| node_mapbox
node_map -->|"checks route hazards"| node_routecheck
node_routecheck -->|"stores reports"| node_layerstate
node_incidentlayer -.->|"fetches incidents"| node_incidentfeed
node_incidentlayer -->|"loads GeoJSON"| node_hospitaldata
node_incidentlayer -->|"loads raster tiles"| node_weatherlayers
node_incidentlayer -.->|"may invoke renderer"| node_cyclone
node_cyclone -->|"fetches forecast"| node_kmaproxy
node_kmaproxy -->|"fetches forecast text"| node_kma
node_cyclone -->|"adds map layers"| node_mapbox

click node_layout "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/layout.tsx"
click node_header "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/Header/Header.tsx"
click node_map "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/page.tsx"
click node_layerhandler "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/ClientLayerHandler.tsx"
click node_nav "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/LeftNav/LeftNav.tsx"
click node_incidentlayer "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/LeftNav/_component/IncidentLayer.tsx"
click node_mapstate "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/provider/mapStore.ts"
click node_layerstate "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/provider/layerStore.ts"
click node_routecheck "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/page.tsx"
click node_cyclone "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/lib/typhoon.ts"
click node_kmaproxy "https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/api/kma-proxy/route.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_header,node_map,node_layerhandler,node_nav,node_user toneBlue
class node_mapstate,node_layerstate toneAmber
class node_incidentlayer,node_routecheck,node_cyclone toneMint
class node_kmaproxy,node_mapbox,node_incidentfeed,node_hospitaldata,node_weatherlayers,node_kma toneRose
```

## Components

### Map Interface

- [Application shell](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/layout.tsx): `app/layout.tsx`
- [Header](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/Header/Header.tsx): `app/_components/feature/Header/Header.tsx`
- [Interactive map](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/page.tsx): `app/page.tsx`
- [Layer handler](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/ClientLayerHandler.tsx): `app/ClientLayerHandler.tsx`
- [Layer navigation](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/LeftNav/LeftNav.tsx): `app/_components/feature/LeftNav/LeftNav.tsx`

### Shared State

- [Map state](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/provider/mapStore.ts): `app/provider/mapStore.ts`
- [Layer state](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/provider/layerStore.ts): `app/provider/layerStore.ts`

### Route and Hazard Analysis

- [Incident and overlays](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/_components/feature/LeftNav/_component/IncidentLayer.tsx): `app/_components/feature/LeftNav/_component/IncidentLayer.tsx`
- [Route obstacle check](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/page.tsx): `app/page.tsx`
- [Cyclone forecast rendering](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/lib/typhoon.ts): `app/lib/typhoon.ts`

### External Data

- [KMA proxy](https://github.com/ffferncake/mapbox-direction-migration/blob/main/app/api/kma-proxy/route.ts): `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

- Map user → Application shell: opens app (evidence: `app/layout.tsx`)
- Application shell → Header: renders (evidence: `app/layout.tsx`)
- Application shell → Interactive map: renders page (evidence: `app/layout.tsx`)
- Application shell → Layer handler: renders (evidence: `app/layout.tsx`)
- Layer handler → Layer navigation: renders (evidence: `app/ClientLayerHandler.tsx`)
- Layer handler → Incident and overlays: renders (evidence: `app/ClientLayerHandler.tsx`)
- Layer navigation → Layer state: reads and updates (evidence: `app/_components/feature/LeftNav/LeftNav.tsx`)
- Layer navigation → Map state: reads map status (evidence: `app/_components/feature/LeftNav/LeftNav.tsx`)
- Interactive map → Map state: sets map status (evidence: `app/page.tsx`)
- Interactive map → Layer state: reads incidents; saves reports (evidence: `app/page.tsx`)
- Incident and overlays → Map state: reads map (evidence: `app/_components/feature/LeftNav/_component/IncidentLayer.tsx`)
- Incident and overlays → Layer state: reads toggles; saves incidents (evidence: `app/_components/feature/LeftNav/_component/IncidentLayer.tsx`)
- Interactive map → Mapbox map and directions: creates map and directions (evidence: `app/page.tsx`)
- Interactive map → Route obstacle check: checks route hazards (evidence: `app/page.tsx`)
- Route obstacle check → Layer state: stores reports (evidence: `app/page.tsx`)
- Incident and overlays → Traffic incident feed: fetches incidents
- Incident and overlays → Hospital GeoJSON: loads GeoJSON (evidence: `app/_components/feature/LeftNav/_component/IncidentLayer.tsx`)
- Incident and overlays → Weather map tiles: loads raster tiles (evidence: `app/_components/feature/LeftNav/_component/IncidentLayer.tsx`)
- Incident and overlays → Cyclone forecast rendering: may invoke renderer (evidence: `app/_components/feature/LeftNav/_component/IncidentLayer.tsx`)
- Cyclone forecast rendering → KMA proxy: fetches forecast (evidence: `app/lib/typhoon.ts`)
- KMA proxy → KMA forecast service: fetches forecast text (evidence: `app/api/kma-proxy/route.ts`)
- Cyclone forecast rendering → Mapbox map and directions: adds map layers (evidence: `app/lib/typhoon.ts`)