A modern web application that visualizes flight paths on an interactive 3D Google Maps globe. Built with Vanilla JS and Vite.
- 3D Globe Visualization: WebGL-powered Vector Maps with smooth rotation and tilt
- Smart Pathing: Accurate geodesic (curved) flight paths between airports
- Multi-Leg Routing: Add up to 8 layovers with drag-and-drop reordering
- Advanced Metrics:
- Distance in Metric (km), Imperial (mi), and Nautical (NM)
- Wind-aware flight time estimates (jet stream effects)
- Per-leg and total trip statistics
- Premium UI: Glassmorphism design, cinematic camera animations, responsive layout
- Node.js (v16+)
- Google Maps API Key with Maps JavaScript API and Geometry Library enabled
git clone https://github.com/Cynid-22/Flight-Tracker.git
cd Flight-Tracker
npm installCreate a .env file in the root directory:
VITE_GOOGLE_MAPS_API_KEY=YOUR_API_KEY_HEREnpm run devOpen http://localhost:5173 in your browser.
src/
├── main.js # Entry point
├── data.js # Airport CSV parser
├── map.js # Map barrel (re-exports)
├── ui.js # UI barrel (re-exports)
├── flight/
│ └── duration.js # Flight time calculator
├── map/
│ ├── core.js # Map initialization
│ ├── path.js # Path drawing
│ ├── labels.js # Airport labels
│ └── animation.js # Camera animation
├── ui/
│ ├── autocomplete.js
│ ├── layovers.js
│ ├── dragdrop.js
│ ├── collapse.js
│ ├── flightInfo.js
│ └── animations.js
└── utils/
├── constants.js
├── formatting.js
└── notifications.js
styles/
├── main.css # Master import
├── variables.css # CSS custom properties
├── base.css # Reset, body, map
├── layout.css # Container, cards
├── components.css # Buttons, inputs
├── layovers.css # Stop management
├── suggestions.css # Autocomplete dropdown
├── flight-info.css # Route display
├── notifications.css # Toast messages
├── animations.css # Transitions
└── map-controls.css # Zoom buttons
| Action | Input |
|---|---|
| Rotate/Tilt | Ctrl + Left Click + Drag |
| Zoom | Scroll wheel or pinch |
| Select Airport | Type code (JFK) or city, press Enter/Tab |
| Reorder Stops | Drag the ⠿ handle |
MIT License. See LICENSE for details.