Use of Fetch API: ISS - International Space Station
In this tutorial, I am going to use the real-time data of the ISS, international space station, to track it and place it on a map. The code is as follows:
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.