Real-time 3D visualization of 2500+ satellites orbiting Earth using CesiumJS and live TLE data from CelesTrak.
- 2500+ Active Satellites from CelesTrak API (including 2000+ Starlink satellites)
- Live position updates using TLE (Two-Line Element) data
- Accurate orbital mechanics calculations
- Real-time velocity and altitude data
- CesiumJS 3D Globe - Professional-grade Earth visualization
- High-resolution NASA imagery
- Country Borders - Beautiful cyan-colored borders showing all countries
- Atmospheric lighting effects
- Day/night cycles
- Smooth camera controls
- 🔵 Starlink (2000+ satellites) - Global internet constellation
- 🔴 Space Stations - ISS, Tiangong, Hubble
- 🟢 Weather - NOAA, METOP, GOES, FengYun, Aqua, Terra
- 🟡 GPS Operational - All active GPS satellites
- 🟠 GLONASS - Russian navigation system
- 🟣 Galileo - European navigation system
- 🇹🇷 Türksat - Turkish communication and observation satellites
- 🔷 Communications - Geostationary satellites (includes Astra, Eutelsat, etc.)
- 🟩 Earth Observation - Resource monitoring satellites
- 💜 Science - Scientific research satellites
- Search - Find any satellite by name
- Category Filtering - Toggle categories on/off
- Click to Select - View detailed satellite information with representative images
- Playback Speed Control - 1x, 10x, 50x, 100x speed
- Camera Controls - Zoom (mouse wheel), pan, rotate the Earth
- Fly to Satellite - Automatic camera movement
- Satellite Images - Each satellite shows a representative image based on its category
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Python 3.x (for local development)
- Internet connection (for CDN resources and API)
- Fork this repository or create a new repo
- Push the code to your GitHub repository
- Enable GitHub Pages:
- Go to repository Settings → Pages
- Source: Deploy from a branch
- Branch:
main/(root) - Click Save
- Wait 1-2 minutes for deployment
- Visit:
https://your-username.github.io/repository-name/
The included GitHub Actions workflow will automatically deploy on every push to main.
-
Clone or download this repository
-
Navigate to the directory:
cd satellite-tracker-pro -
Start local server:
python3 -m http.server 8000 # or npx serve -
Open in browser:
http://localhost:8000
- Wait for the loading screen - it fetches real satellite data from CelesTrak
- Progress bar shows the loading status
- All satellites will appear on the 3D globe
- Colored dots represent satellites
- Different colors for different categories
- Click any satellite to view details
- Hover to see highlight
- Left Click & Drag - Rotate Earth
- Right Click & Drag - Pan camera
- Scroll - Zoom in/out
- Home Button - Reset to default view
- Play/Pause - Control time
- Speed Button - Change playback speed
- Use the sidebar to toggle categories
- Use search box to find specific satellites
- Click category filters to show/hide groups
- Opens when you click a satellite
- Shows:
- Representative satellite image based on category
- Satellite name and category
- Current latitude/longitude
- Altitude (km)
- Velocity (km/h)
- Last update time
- CesiumJS 1.109 - 3D geospatial visualization
- Satellite.js 5.0 - SGP4/SDP4 orbit propagation
- CelesTrak API - Real-time TLE data source
- Vanilla JavaScript - No framework dependencies
- CSS3 - Modern styling with animations
- TLE Data: CelesTrak
- Earth Imagery: Cesium Ion (NASA/ESA)
- Satellite Categories: NORAD classification
- Uses SGP4/SDP4 propagation model
- Converts ECI (Earth-Centered Inertial) to geodetic coordinates
- Calculates position, velocity, and altitude
- Updates in real-time
- Handles 2500+ satellites smoothly (including 2000+ Starlink)
- Efficient entity management
- Optimized render loop
- Lazy loading for satellite list
- GPU-accelerated 3D rendering
Edit app.js and modify the tleGroups array:
{
name: 'Category Name',
url: 'https://celestrak.org/NORAD/elements/gp.php?GROUP=group&FORMAT=tle',
color: '#hexcolor',
limit: 100 // optional
}Modify CSS variables in style.css:
:root {
--primary: #00d9ff;
--secondary: #0066ff;
--accent: #ff00ff;
}The app uses a free Cesium Ion token. For production:
- Sign up at Cesium Ion
- Get your free API key
- Replace token in
app.js
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
- Fully responsive design
- Touch-optimized controls
- Collapsible sidebar
- Works on tablets and phones
- No user data collection
- No tracking or analytics
- Runs entirely client-side
- Only connects to CelesTrak API for satellite data
- Initial load time depends on internet speed
- Some satellites may have outdated TLE data
- Very old satellites might not propagate correctly
- Performance varies with device capabilities
Potential improvements:
- Orbital path visualization
- Ground track display
- Pass predictions for user location
- Historical satellite positions
- Satellite collision warnings
- Export tracking data
- Multiple view modes (2D/3D)
- Custom satellite groups
- Notification system
- Dark/light theme toggle
This project is open source and available for personal and educational use.
- Satellite data: CelesTrak
- 3D Engine: CesiumJS
- Orbital calculations: Satellite.js
Contributions are welcome! Feel free to:
- Report bugs
- Suggest features
- Submit pull requests
- Improve documentation
For questions or issues:
- Check the browser console for errors
- Ensure you have internet connection
- Try refreshing the page
- Clear browser cache
Special thanks to:
- CelesTrak for providing free TLE data
- Cesium team for the amazing 3D engine
- Space-Track.org for satellite information
- NASA for Earth imagery
Made with ❤️ for space enthusiasts
Track satellites in real-time and explore Earth from space!