ISS Live Tracker

Real-time ISS tracker combining 5+ space APIs for live position, astronaut data, and space weather

Comment

Inspiration

The vastness of space has always fascinated me, but it often feels distant and inaccessible. When I learned that the International Space Station orbits Earth every 90 minutes at 17,500 mph with astronauts living aboard, I wanted to make this incredible feat of human engineering feel more tangible and real. The idea of tracking something moving that fast, knowing real people are inside, inspired me to create a dashboard that brings space closer to home. With AstroHack's focus on space APIs, I saw the perfect opportunity to combine multiple data sources into one cohesive experience that makes space exploration accessible to everyone.

What it does

ISS Live Tracker is a real-time space monitoring dashboard that integrates 6+ different APIs to provide comprehensive tracking of the International Space Station. The application:

  • Tracks the ISS position in real-time, updating every 5 seconds with latitude, longitude, altitude, and velocity
  • Shows which country or ocean the ISS is currently flying over with flag indicators
  • Displays a running total of distance traveled since you opened the page
  • Lists all astronauts currently in space (both on ISS and other spacecraft)
  • Features an interactive map with the ISS's orbital path
  • Provides real solar wind data and space weather conditions from NOAA
  • Shows NASA's Astronomy Picture of the Day with daily updates
  • Helps users find when the ISS might be visible from their city
  • All wrapped in a modern, animated UI with 3D hover effects and smooth transitions

How I built it

The project was built using pure HTML, CSS, and JavaScript - no frameworks needed! Here's the technical approach:

  • Frontend: Vanilla JavaScript for all functionality, CSS3 for animations and styling
  • Maps: Leaflet.js for the interactive tracking map
  • APIs Integration:
    • WhereTheISS API for real-time position data
    • Open-Notify for astronaut information
    • NASA APOD for daily space imagery
    • NOAA Space Weather for solar wind data
    • OpenStreetMap Nominatim for reverse geocoding
    • FlagCDN for country flags
  • CORS Handling: Used proxy services where needed to handle CORS restrictions
  • Real-time Updates: JavaScript intervals to fetch fresh data every 5-30 seconds
  • Responsive Design: CSS Grid and Flexbox for mobile-friendly layouts

Challenges I ran into

  1. CORS Restrictions: Several space APIs don't allow direct browser access. I had to implement proxy solutions and handle failed requests gracefully.
  2. ISS Pass Predictions: The Open-Notify pass times API has CORS issues, and calculating accurate orbital mechanics would require complex math beyond the scope of a hackathon. I opted for educational information about ISS visibility instead.
  3. API Rate Limits: NASA's DEMO_KEY has strict limits. I implemented fallbacks and error handling to ensure the app remains functional even when limits are hit.
  4. Distance Calculations: Calculating accurate distances on a sphere (Earth) required implementing the Haversine formula and handling edge cases like the ISS crossing the International Date Line.
  5. Real-time Performance: Updating multiple API calls every few seconds while maintaining smooth animations required careful optimization.

Accomplishments that I'm proud of

  • Successfully integrated 6+ different APIs into one cohesive experience
  • Created a visually stunning UI with smooth animations and 3D effects in just 3 files
  • Implemented accurate distance tracking using proper spherical geometry
  • Made complex space data accessible and understandable to everyone
  • Built everything with vanilla JavaScript - no heavy frameworks needed
  • Achieved real-time tracking that actually feels "live" with 5-second updates
  • Created an educational tool that makes space exploration tangible

What I learned

  • How to handle multiple asynchronous API calls efficiently
  • The complexity of orbital mechanics and why "simple" features like pass predictions require advanced calculations
  • Techniques for gracefully handling API failures and CORS restrictions
  • The importance of user experience in data visualization - making numbers feel real and exciting
  • How to optimize real-time applications for performance
  • The value of being transparent about technical limitations rather than faking data

What's next for ISS Live Tracker

  • 3D Globe Visualization: Replace the 2D map with an interactive 3D Earth showing the ISS orbit
  • Push Notifications: Alert users when the ISS is about to pass over their location
  • Historical Playback: Let users replay the ISS path from previous days/weeks
  • Live Video Feed: Integrate NASA's live stream from the ISS
  • More Satellites: Track other satellites like Hubble, Tiangong, and Starlink constellation
  • AR Mode: Use phone cameras to point at the sky and see exactly where the ISS is
  • Social Features: Let users share ISS sightings and photos
  • Educational Content: Add information about ISS experiments and life in space
  • API Development: Create our own API that combines all these data sources for other developers

Built With

Share this project:

Updates