Use of Fetch API: Raavana 1 - Sri Lanaka's First Satellite
In this tutorial, I am going to use the real-time data of Raavana1, Sri Lanka's first satellite, to track it and place it on a map live.
Raavana 1 the first satellite of Sri Lanka; it's a low-orbit satellite developed by two university undergraduates of Peradeniya University in Kandy, Sri Lanka.The low-orbit satellite was launched on 17 April 2019 from the United States into space. With a relatively-low life-span of about 1½ years, the primary objective of the satellite is to obtain images of Sri Lanka - and in the region - thanks to its relatively low altitude.
The developers involved in the project has chosen the name, Raavana 1 in order to highlight a historical event in the Sri Lankan folklore.As the legend has it, it was the first-ever aircraft designed by a human, a ruler of Sri Lanka, known as Raavana, in order to abduct the consort of god Rama, known as Sita, when she strayed into a forest in the absence of her husband, Rama.
In developing this project, I have been using the following:
- Fetch function of the Rest API to get the data.
- To get a promise and extract relevant data - latitude and longitude in this case.
- Using Leaf.js framework for mapping
Raavana 1 - Sri Lanka's First Satellite: live tracking
Latitude: ° | Longitude: °
Speed = 27612 kmph | Orbital Period = 1½ hours
The code is as follows:
<script>
const url=" https://www.n2yo.com/rest/v1/satellite/positions/44330/observer_lat/observer_lng/observer_alt/10&apiKey=-------------------"
var raavana1Icon = L.icon({
iconUrl: 'raavana1.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);
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);
const marker = L.marker([0, 0],{icon:raavana1Icon}).addTo(mymap);
async function getRaavana(){
const response=await fetch(url);
const data=await response.json();
const {satlatitude,satlongitude} =data.positions[0];
//const {latitude, longitude}=data;
document.getElementById('latitude').textContent = satlatitude.toFixed(1);
document.getElementById('longitude').textContent = satlongitude.toFixed(1);
mymap.setView([satlatitude, satlongitude], 3);
marker.setLatLng([satlatitude, satlongitude]);
}
setInterval(getRaavana,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.