Skip to content

pawankjajoo/Virtual-Flights-Map

BranchesTags

Repository files navigation

Virtual Flights Map

A comprehensive 2D interactive map for real-time flight tracking across ALL major flight simulation platforms and virtual ATC networks.

Overview

Virtual Flights Map provides a unified interface for tracking pilots and air traffic controllers across multiple flight simulation communities simultaneously. Whether you fly on VATSIM, IVAO, POSCON, or other virtual flight simulation networks, this map consolidates all real-time traffic into one beautiful, responsive interface.

Features

Real-Time Flight Tracking

  • Multi-Network Support: Track flights from VATSIM, IVAO, POSCON, and other compatible networks
  • which means coverage of ALL online players from X-Plane (all editions), Microsoft Flight Simulator (all editions) and P3D Software
  • Live Aircraft Markers: See all active pilots with callsigns, positions, and headings
  • ATC Coverage: Interactive ATC stations showing active controllers worldwide
  • Live Statistics: Real-time pilot and controller counts with connection status

Interactive Controls

  • Aircraft Search: Find any flight by callsign or ATC by facility/frequency
  • Flight Information Panel: Click any aircraft for detailed info (altitude, speed, heading, route, flight plan)
  • Layer Toggles: Show/hide aircraft, ATC stations, routes, and weather overlays
  • Map Navigation: Pan, zoom, and explore routes interactively
  • Responsive Design: Works seamlessly on desktop, tablet, and mobile devices

Visual Features

  • Dark Cockpit Theme: Professional aviation-inspired interface with cyan accents
  • Aircraft Type Classification: Color-coded markers (Heavy, Medium, Light Jet, General Aviation)
  • ATC Circle Coverage: Visual representation of controller coverage areas
  • Live Route Display: Flight path and routing information
  • Smooth Animations: Fluid interactions and transitions throughout the interface

Advanced Capabilities

  • Multi-Network Aggregation: Real-time data consolidation from multiple sources
  • ROI Tool Integration: Region of Interest analysis tools for flight analysis
  • Frequency Search: Look up ATC frequencies and controller information
  • Flight Plan Parsing: Detailed routing and flight plan information
  • ATIS Voice Integration: Text-to-speech for ATIS information

Technical Stack

Frontend

  • Leaflet.js v1.9.4: Powerful open-source mapping library (free, no API key required)
  • Custom Vector Tiles: Multiple tile sources for different map styles
  • Responsive CSS: Mobile-first design with Flexbox and CSS Grid
  • Modern JavaScript: ES6+ with async/await for data fetching

Styling

  • Dark Theme: Custom CSS variables for easy theme customization
  • Inter & SF Mono: Professional typography for clarity and readability
  • Glassmorphism: Backdrop blur effects for modern UI components
  • Smooth Animations: 0.15s-0.3s transitions for fluid interactions

Data Integration

Architecture

  • 100% Client-Side: No backend server required
  • Self-Contained: Single HTML file with all assets
  • No Build Process: Drop and run - works with any static web server
  • No External Dependencies: All required libraries loaded via CDN

Getting Started

Installation

  1. Download the HTML file:

    git clone https://github.com/pawankjajoo/Virtual-Flights-Map.git
cd Virtual-Flights-Map

  2. Open in Browser:

    • Simply open PSS Virtual Flight Map CFW.html in any modern web browser
    • No server or build process required
    • Works locally by opening the file directly

Browser Requirements

  • Modern browser with ES6+ support (Chrome 51+, Firefox 55+, Safari 11+, Edge 79+)
  • JavaScript enabled
  • CORS support for API data fetching
  • Sufficient network bandwidth for real-time updates

No Configuration Needed

The application works out-of-the-box with default settings optimized for performance and clarity. No API keys, authentication, or configuration files required.

Usage Guide

Basic Navigation

  • Pan Map: Click and drag to move around the map
  • Zoom: Scroll wheel to zoom in/out or use map controls
  • Drag to Rotate: On globe mode (if available), drag to rotate view
  • Reset View: Click the reset button to return to default view

Searching Flights

  1. Click the search box at the top of the screen
  2. Type a callsign (e.g., "DAL123") or controller frequency (e.g., "124.1")
  3. Select from dropdown results
  4. Map will automatically navigate to the selected flight/ATC

Viewing Flight Details

  1. Click any aircraft marker on the map
  2. Info drawer opens showing:
    • Flight Information: Callsign, aircraft type, status
    • Position & Movement: Latitude, longitude, altitude, heading, ground speed
    • Flight Plan: Departure airport, arrival airport, cruise altitude, route
    • Remarks: Special notes and flight information

Viewing ATC Information

  1. Click any ATC circle marker
  2. Controller details appear showing:
    • Frequency: Active ATC frequency
    • Position: Airport or airspace coverage
    • Controller Callsign: ATC identifier
    • ATIS Information: Voice readout of ATIS via text-to-speech

Layer Control

Toggle visibility of different map elements:

  • Aircraft Toggle: Show/hide all flight markers
  • ATC Toggle: Show/hide controller coverage circles
  • Routes Toggle: Show/hide flight paths and routes
  • Weather Toggle: Overlay weather data (when available)

Data Sources

Network Source Status
VATSIM data.vatsim.net/v3/vatsim-data.json Primary
IVAO api.ivao.aero/v2/tracker/whazzup Secondary
POSCON POSCON API endpoints Tertiary

Update Frequency: 10 seconds (configurable in code)

Rate Limiting: Conservative polling to avoid exceeding network API limits

Files Included

Virtual-Flights-Map/
├── PSS Virtual Flight Map CFW.html       - Main application (single file, 200+ KB)
├── Flight Map + ROI Tool Updated...txt   - ROI tool documentation and setup
└── README.md                              - This documentation

Color Legend

Aircraft Types (Map Markers)

  • Light Blue (#38bdf8): Heavy aircraft (A380, 747, 777, A350, A340)
  • Purple (#a78bfa): Medium aircraft (A320, 737, 757, A319, A321)
  • Pink (#f472b6): Light jets (Citation, Gulfstream, Learjet)
  • Orange (#fb923c): General aviation (Cessna, Piper, Beechcraft)

Status Indicators

  • Green Pulsing Dot: Live connection active
  • Cyan Dot: Pilots active
  • Green Dot: ATC online
  • Red: Connection error

Performance

  • Optimized for 500+ concurrent pilots: Efficient rendering and marker management
  • Smooth 60 FPS: GPU-accelerated rendering when idle
  • Real-time Updates: 10-second refresh maintains accuracy without overwhelming API endpoints
  • Responsive: Works smoothly on mobile devices and low-bandwidth connections

Browser Compatibility

Browser Minimum Version Status
Chrome 51+ ✓ Full Support
Firefox 55+ ✓ Full Support
Safari 11+ ✓ Full Support
Edge 79+ ✓ Full Support
Opera 38+ ✓ Full Support
IE 11 — ✗ Not Supported

Deployment

Static Web Server

# Copy files to any static web server
# Apache, Nginx, GitHub Pages, Vercel, Netlify all work

# Example with Python
python -m http.server 8000
# Then open http://localhost:8000/PSS\ Virtual\ Flight\ Map\ CFW.html

Direct File Opening

# Simply open the HTML file directly in a browser
open PSS\ Virtual\ Flight\ Map\ CFW.html  # macOS
start PSS\ Virtual\ Flight\ Map\ CFW.html # Windows

Customization

Theme Customization

The application uses CSS custom properties for easy theme modifications. Edit these in the <style> section:

:root {
  --bg: #090d18;           /* Main background */
  --acc: #22d3ee;          /* Accent color (cyan) */
  --grn: #34d399;          /* Success/active color */
  /* ... more variables */
}

Configuration

Internal configuration values are defined in JavaScript:

  • CONFIG.pollInterval: Data refresh interval (default: 10000ms)
  • CONFIG.corsProxy: CORS proxy URL for API calls
  • CONFIG.networks: Array of enabled networks (VATSIM, IVAO, POSCON)

Extension Points

The architecture supports easy extensions:

  • Network Adapters: Add support for new virtual ATC networks
  • Data Processing: Custom pilot/ATC data transformation
  • UI Customization: Modify colors, fonts, and layout
  • Feature Additions: Weather overlay, flight trails, 3D terrain
  • Integration: WebSocket real-time updates, backend data aggregation

Limitations

  1. No Historical Data: Shows current traffic only, no historical records
  2. No Flight Trails: Position displayed at single timestamp, not path history
  3. Mercator Projection: Slight distortion at polar regions
  4. No Offline Mode: Requires active internet connection for real-time data
  5. API Rate Limits: Respects network API limits (1 request per 10s per network)

Troubleshooting

Map Not Loading

  • Check internet connection
  • Verify browser JavaScript is enabled
  • Clear browser cache and refresh
  • Try a different browser if available

No Flight Data Showing

  • Verify network status indicator shows "Live"
  • Check that at least one network is selected
  • Ensure enough pilots/ATC are online on selected networks
  • Verify CORS proxy is accessible (if using remote networks)

Slow Performance

  • Reduce number of visible layers (toggle unused layers off)
  • Close other browser tabs using network bandwidth
  • Refresh the page to clear old marker data
  • Try a lighter browser theme

API Rate Limits & Strategy

  • VATSIM: 1 request per 10 seconds (conservative)
  • IVAO: 1 request per 10 seconds (varies by endpoint)
  • POSCON: As specified by their API documentation
  • Graceful Error Handling: Missing data displays "—" without breaking UI
  • Connection Monitoring: Real-time status updates in header

Code Architecture

Key Components

  1. Data Pipeline: Fetch → Normalize → Store → Render
  2. Marker System: SVG-based aircraft icons with rotation
  3. UI Components: Header, search box, layer controls, info drawer
  4. Event Handler: Click delegation for dynamic content
  5. Animation Engine: Smooth transitions and map panning

Responsive Breakpoints

  • Desktop: Full UI, all controls visible (800px+)
  • Tablet: Compact controls, truncated labels (480-799px)
  • Mobile: Stacked layout, full-width panels (<480px)

Performance Metrics

  • Startup Time: <2 seconds on 4G connection
  • Data Update Latency: 10-15 seconds (API poll interval + processing)
  • Marker Rendering: 60 FPS for up to 500 markers
  • Bundle Size: 200+ KB (HTML file with embedded CSS/JS)
  • Memory Usage: 50-150 MB depending on concurrent traffic

Security

  • No Backend: All data processing client-side, no sensitive data transmission
  • CORS Proxies: Standard CORS proxy services for third-party API access
  • No Local Storage of Credentials: Anonymous public API access only
  • Content Security Policy Compatible: Can be hosted in CSP-restricted environments

License

Developed by Pawan K Jajoo | Pushstart Simulators

This project is open source and available for educational and personal use within flight simulation communities.

Contributing

Contributions welcome! Areas for enhancement:

  • Additional flight simulation network adapters
  • Weather overlay integration
  • Flight trail visualization
  • 3D terrain rendering
  • Performance optimizations
  • Mobile UI improvements

Support & Community

  • For issues and feature requests, open an issue on GitHub
  • Join flight simulation communities on VATSIM, IVAO, or POSCON
  • Share feedback and suggestions for improvements

Version History

  • v1.0: Initial release with Leaflet.js mapping
  • Features: Multi-network tracking, live ATC, flight search, responsive design
  • Last Updated: March 2026

Made with ❤️ for the virtual aviation community | Pushstart Simulators

About

Virtual Flight Tracking Map for ALL Flight Simulation Titles & Platforms

maps.pushstartsims.com/

Topics

map gaming virtual-reality bing-maps apple-maps flight-simulator xplane flight-tracking flight-sim microsoft-flight-simulator msfs

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages