Use of Fetch API: ISS - International Space Station - Live Tracking
Do you have just 90 minutes to spare?
Blast Off with Live International Space Station Tracking!
Have you ever wondered what it's like to orbit Earth at 17,500 mph, at an altitude of about 400 km? Track the International Space Station (ISS) in real-time with our web app and witness the wonder of humanity's engineering marvel, when coupled with creative imagination.
See the ISS path as it zooms around our planet, check visibility times for your area, and witness the world from a breathtaking perspective. Our user-friendly interface, powered by JavaScript APIs, lets you have it; the ISS takes just 90 minutes to go around the Earth completely.
Please note that the altitude of the ISS in orbit changes due to atmospheric drag, as it was just 400 km above the Earth. That means, it needs periodic boosts to keep it in orbit.
- Track the ISS live and see its current location
- Explore past and future trajectories
- Discover when the ISS is visible over your area (perfect for stargazing!)
Educational Bonus:This web app utilizes JavaScript APIs to communicate with external data sources, allowing for real-time data visualization. Learn how web development can bridge the gap between space exploration and your computer screen!
Experience the awe of space exploration from the comfort of your device. Launch into live ISS tracking today!
International Space Station -ISS: live tracking
Latitude: ° | Longitude: °
Speed = 17310 mph | Orbital Period = 1½ hours
<script>
//url for live data
const url="https://api.wheretheiss.at/v1/satellites/25544";
// ISS image as an icon
var issIcon = L.icon({
iconUrl: 'images/ISS.png',
iconSize: [50, 50], // size of the icon
iconAnchor: [25, 25], // point of the icon which will correspond to marker's location
});
const mymap = L.map('mymap').setView([0, 0], 3);
// attribution to give credit to leaf.js
const attribution =
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const tiles = L.tileLayer(tileUrl, { attribution });
tiles.addTo(mymap);
// adding marker on the map
const marker = L.marker([0, 0],{icon:issIcon}).addTo(mymap);
// getting ISS data through Fetch
async function getIss(){
const response=await fetch(url);
const data=await response.json();
// latitude and longitude data
const {latitude, longitude}=data;
if (latitude>7.8 && longitude<80.7){
}
document.getElementById('latitude').textContent = latitude.toFixed(1);
document.getElementById('longitude').textContent = longitude.toFixed(1);
mymap.setView([latitude, longitude], 3);
marker.setLatLng([latitude, longitude]);
}
//getting data in every second
setInterval(getIss,1000);
</script>
In this project, the data in the form of latitude and longitude are taken from the given source, using the Fetch() function. It comes as a promise. The promise is then turned into json format.
From json data, latitude and longitude are extracted with the aid of destructuring-process of ES6.
In addition, the map object, layers and markers from Leaf.js are used to animate the ISS on the map.
Data is retrieved after every second using setInterval() of JavaScript.