ISS Tracker - International Space Station Real-Time Tracker

A web application that tracks the International Space Station (ISS) in real-time using public APIs. Built with vanilla JavaScript, HTML, and CSS.

Features

Real-Time Tracking

• Real-time ISS Position: Updates every 5 seconds showing latitude and longitude
• Interactive Map: Visual display using Leaflet.js with OpenStreetMap tiles
• Your Location: Enter your coordinates to see your location on the map and calculate distance to ISS
• ISS Crew Information: Displays the names and count of astronauts currently aboard the ISS
• Real-Time Orbital Details: Shows live altitude, velocity, and calculated orbits per day from ISS telemetry
• Dual Live Video Streams: Watch two ISS live camera feeds directly on the page via YouTube embeds
• Follow ISS Toggle: Enable/disable auto-centering on the ISS
• Crew Details Page: Dedicated page with crew photos, days in space, and country
• Information Page: Dedicated page describing what the ISS is, the tracker, and why video can appear black, with local images
• Day/Night Overlay: Shows the Earth’s night side on the map for context
• Copy Coordinates: One-click copy of the current ISS position
• Updated Timer: Displays how recently the data was refreshed
• Map Controls: Reset view button and “Following ISS” indicator
• Approx Pass Estimate: Rough next-pass estimate based on current orbit direction
• Well-Commented Code: Detailed comments across HTML, CSS, and JavaScript for learning and clarity
• Resilient Night Overlay: Day/night shading now fails gracefully if the plugin doesn’t load
• Dark/Light Theme Toggle: Switch between dark and light themes with a single button click (preference saved to localStorage)
• Responsive Design: Works on desktop and mobile devices

How to Run

Option 1: Open Directly (Recommended)

1. Simply open html/index.html or the root index.html redirect in your web browser
2. The tracker will start automatically

Option 2: Using a Local Server (If needed for CORS)

If you encounter any issues with the direct method:

Using Python:

# Python 3
python -m http.server 8000

# Then open http://localhost:8000 in your browser

Using Node.js (if you have it installed):

npx serve

Using VS Code:

• Install the "Live Server" extension
• Right-click on the root index.html and select "Open with Live Server"

Project Structure

Iss-Tracker-WebApp/
├── index.html              # Root redirect to the main app page
├── html/
│   ├── index.html          # Main ISS tracker dashboard
│   ├── crew.html           # Crew details page
│   └── info.html           # ISS information page
├── css/
│   ├── style.css           # Shared app styling and main dashboard theme
│   ├── crew.css            # Crew page specific styles
│   └── info.css            # Information page specific styles
├── js/
│   ├── script.js           # Main tracker logic, map, API calls, and controls
│   ├── crew.js             # Crew page data loading and rendering
│   └── info.js             # Information page image fallback handling
├── images/
│   ├── iss_web_app.png
│   ├── iss-cam-dark-side.png
│   └── iss01.jpg
├── README.md
└── LICENSE

Technologies Used

• HTML5: Structure and layout with iframe embeds
• CSS3: Styling with modern gradient backgrounds and glass-morphism effects
• JavaScript (ES6+): Async/await for API calls, DOM manipulation
• Leaflet.js: Interactive map library
• OpenStreetMap: Map tile provider
• WhereTheISS.at API: Real-time ISS telemetry (position, altitude, velocity - no API key required!)
• ISS APIs: ISS crew member data (no API key required!)
• LL2 Astronauts API: Crew photos, nationality, and time in space (no API key required)
• YouTube Embeds: Two live ISS video feeds from NASA
• localStorage API: Browser-based data persistence

APIs Used

1. WhereTheISS.at API: https://api.wheretheiss.at/v1/satellites/25544

   • Provides real-time ISS telemetry data
   • Latitude, longitude, altitude, and velocity
   • Updated every 5 seconds in this app

2. ISS Astronaut API: https://corquaid.github.io/international-space-station-APIs/JSON/people-in-space.json

   • Lists astronauts currently aboard the ISS
   • Provides crew member names and count

3. Launch Library 2 (LL2) Astronauts API: https://ll.thespacedevs.com/2.2.0/astronaut/?in_space=true&mode=detailed

   • Provides astronaut photos and time in space
   • Used to enrich crew cards on html/crew.html

How It Works

Real-Time Tracking

1. Initialization: Creates a Leaflet map centered on Earth
2. Data Fetching: Makes API calls to get ISS position and crew data
3. Real-time Updates: Uses setInterval() to refresh data automatically
4. Visual Display: Updates map marker, radius circle, and displays statistics
5. Live Video Streams: Two embedded YouTube iframes showing ISS camera feeds
6. User Interaction: Click anywhere on the map to see coordinates
7. Persistence: User location and theme preference are stored in localStorage

Learning Concepts (AP CSP)

This project demonstrates several key Computer Science Principles:

Core CS Concepts

• APIs and Data: Fetching and parsing JSON data from external sources
• Asynchronous Programming: Using async/await and fetch()
• Data Visualization: Displaying real-time data on interactive maps
• User Input Validation: Validating latitude/longitude coordinates
• DOM Manipulation: Updating HTML elements dynamically with JavaScript
• Event Handling: Responding to timers, button clicks, and user interactions
• Abstraction: Using libraries (Leaflet.js) to simplify complex tasks

Data & Computing Concepts

• Data Storage: Using localStorage for persistent data (user location, theme)
• Mathematical Modeling: Haversine formula for calculating distances on a sphere
• Algorithm Implementation: Distance calculation, orbital mechanics calculations
• Real-time Updates: Continuous data fetching and display updates

AP CSP Performance Tasks Connection

This project is excellent preparation for the Create Performance Task:

• Input: Real-time API data, user location inputs, button clicks
• Processing: Position calculations, distance calculations, orbital mechanics
• Output: Interactive map displays, real-time statistics, live video feeds
• Lists: Arrays for crew lists and name mapping
• Procedures: Functions for distance calculation, position updates, location management
• Algorithm: Distance calculation using Haversine formula

Possible Future Enhancements

• Add pass prediction for your location (when ISS will be visible)
• Show day/night terminator on Earth
• Add satellite visibility calculator
• Include more orbital parameters (apogee, perigee)
• Add notifications when ISS is overhead
• Add comparison with other satellites (Hubble, Chinese Space Station)

Fun Facts

• The ISS orbits Earth approximately every 90 minutes
• It travels at about 7.66 km/s (27,600 km/h or 17,150 mph)
• The ISS orbits at an altitude of approximately 420 km (260 miles)
• It completes about 15-16 orbits per day (calculated in real-time in the app based on altitude and velocity)
• The ISS has been continuously occupied since November 2000
• NASA's live ISS streams show views from external cameras pointed at Earth 24/7
• When the ISS is on the night side of Earth, the video feed may show a black screen or switch to internal camera views
• Crew details and information pages open in the same tab

Credits

• ISS telemetry data provided by WhereTheISS.at API
• ISS crew data provided by International Space Station APIs
• Astronaut details provided by The Space Devs (Launch Library 2)
• Maps powered by Leaflet.js
• Map tiles from OpenStreetMap
• ISS icon from Wikimedia Commons