# frey210/airporttech_interactive-map architecture

> Architecture diagram of the GitHub repository frey210/airporttech_interactive-map, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/frey210/airporttech_interactive-map
- Repository: https://github.com/frey210/airporttech_interactive-map

## Overview

This is a React-based airport technology map application. Users load maps, inspect and filter equipment markers, and view network status; authorized users can create maps, edit marker placement, publish or delete maps, and manage map icons. The app coordinates these workflows through an API client that communicates with an external service. The supplied excerpts show the map wizard, icon wizard, editor panel, and coordinate utilities; some App wiring is only partially excerpted, so uncertain links are marked unverified.

Main entry points: [`src/App.tsx`](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx) (Map application), [`src/api.ts`](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/api.ts) (Map API client), [`src/main.tsx`](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/main.tsx) (React entry), [`src/MapWizard.tsx`](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/MapWizard.tsx) (Map creation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Map interface"]
  node_app_entry["React entry<br/>[main.tsx]"]
  node_app["Map application<br/>[App.tsx]"]
  node_map_browsing["Browse and filter<br/>[App.tsx]"]
  node_network_view["Network status<br/>[App.tsx]"]
end

subgraph group_editing["Map editing"]
  node_map_wizard["Map creation<br/>[MapWizard.tsx]"]
  node_editor_panel["Marker editor panel<br/>[MapEditorPanel.tsx]"]
  node_icon_wizard["Icon management<br/>[IconWizard.tsx]"]
end

subgraph group_services["API and data"]
  node_api_client["Map API client<br/>[api.ts]"]
end

subgraph group_geometry["Map geometry"]
  node_coordinates["Coordinate utilities<br/>[coordinates.ts]"]
end

node_user(("Map user"))
node_map_service["Map service"]

node_user -->|"opens"| node_app_entry
node_app_entry -->|"renders"| node_app
node_app -->|"loads and mutates"| node_api_client
node_api_client -->|"requests data"| node_map_service
node_app -->|"presents maps"| node_map_browsing
node_app -->|"loads status"| node_network_view
node_app -->|"renders editor"| node_editor_panel
node_editor_panel -->|"invokes callbacks"| node_app
node_app -.->|"opens wizard"| node_map_wizard
node_map_wizard -->|"creates and uploads"| node_api_client
node_app -.->|"opens manager"| node_icon_wizard
node_icon_wizard -->|"uploads and deletes"| node_api_client
node_app -->|"constrains view"| node_coordinates

click node_app_entry "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/main.tsx"
click node_app "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx"
click node_map_browsing "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx"
click node_network_view "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx"
click node_map_wizard "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/MapWizard.tsx"
click node_editor_panel "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/MapEditorPanel.tsx"
click node_icon_wizard "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/IconWizard.tsx"
click node_api_client "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/api.ts"
click node_coordinates "https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/coordinates.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_app_entry,node_app,node_map_browsing,node_network_view,node_user toneBlue
class node_map_wizard,node_editor_panel,node_icon_wizard toneAmber
class node_api_client toneMint
class node_coordinates toneRose
class node_map_service toneIndigo
```

## Components

### Map interface

- [React entry](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/main.tsx): `src/main.tsx`
- [Map application](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx): `src/App.tsx`
- [Browse and filter](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx): `src/App.tsx`
- [Network status](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/App.tsx): `src/App.tsx`

### Map editing

- [Map creation](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/MapWizard.tsx): `src/MapWizard.tsx`
- [Marker editor panel](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/MapEditorPanel.tsx): `src/MapEditorPanel.tsx`
- [Icon management](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/IconWizard.tsx): `src/IconWizard.tsx`

### API and data

- [Map API client](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/api.ts): `src/api.ts`

### Map geometry

- [Coordinate utilities](https://github.com/frey210/airporttech_interactive-map/blob/konfigurasi/path-produksi-maps/src/coordinates.ts): `src/coordinates.ts`

### Other components

- **Map user**
- **Map service**

## Connections

- Map user → React entry: opens (evidence: `src/main.tsx`)
- React entry → Map application: renders (evidence: `src/main.tsx`)
- Map application → Map API client: loads and mutates (evidence: `src/App.tsx`)
- Map API client → Map service: requests data (evidence: `src/api.ts`)
- Map application → Browse and filter: presents maps (evidence: `src/App.tsx`)
- Map application → Network status: loads status (evidence: `src/App.tsx`)
- Map application → Marker editor panel: renders editor (evidence: `src/App.tsx`)
- Marker editor panel → Map application: invokes callbacks (evidence: `src/MapEditorPanel.tsx`)
- Map application → Map creation: opens wizard (evidence: `src/App.tsx`)
- Map creation → Map API client: creates and uploads (evidence: `src/MapWizard.tsx`)
- Map application → Icon management: opens manager (evidence: `src/App.tsx`)
- Icon management → Map API client: uploads and deletes (evidence: `src/IconWizard.tsx`)
- Map application → Coordinate utilities: constrains view (evidence: `src/App.tsx`)