Coding DIY part 2: Tracking the Location of ISS using it's public API

Good day, friends. This wonderful community was recommended to me by @hivetrending after I made my first coding DIY post in the DIYHub community. In today's episode of Coding DIY, we will be writing some JavaScript and HTML codes capable of tracking the location of the International Space Station (ISS).

_{Designed with postermywall}

Brief about the ISS

The International Space Station (ISS) is a habitable artificial satellite in low Earth orbit. It was launched in 1998 and has been continuously occupied by astronauts from around the world since 2000 ( the year I was born). The ISS is a collaboration between five space agencies: NASA, Roscosmos, JAXA, ESA, and CSA. The station serves as a research laboratory for scientists to conduct experiments in astronomy, meteorology, and other fields. The ISS orbits the Earth at a height of approximately 408 km and completes one orbit every 90 minutes. Source

There is a public API that updates the current longitude and latitude and other information about the ISS satellite, and we will fetch the latitude and longitude data from the API thanks to the Fetch API of Javascript.

Before we get started, below are all the things needed to achieve our goal of tracking the ISS's location.

1. Code Editor ( Ich bin ein VS-Code-Editor)
2. Technologies (HTML, Vanilla Javascript, Lealet JS)
3. Browser ( I am using Mozilla Firefox)4. API endpoint of ISS

Let's get started

STEP 1: Initializing the Project.

In the first place, we will initialize the project by opening our Visual Studio Code editor and creating two files, HTML, Javascript files, and the satellite png image. I will be creating all files in a folder named Map_DIY as shown in the screenshot below

---

STEP 2 :Initializing the HTML file to display the map on a webpage.

Here, we will write HTML code that will display the contents of whatever we will be creating on the webpage. The HTML file I have created contains the title of our webpage and the contents we want to display on the webpage.

---

STEP 3: Adding Style and Javascript to the Webpage After we have created our HTML file,

The HTML is just a skeleton of text and other files displayed on a webpage. We can add styling to the webpage by including CSS, in this case, I will write the styling in a style tag. In order to add live functionality to our website, we must first link a Javascript file. As I have already created a Javascript file, I will link it to the HTML/webpage by using the script tag as seen in the screenshot below.

The state of the webpage after adding styles and Javascript.

---

STEP 4: Creating a Javascript function to get the data from the ISS API.

This is the point where we will fetch the data about the current location of the ISS from the API. Before you will be able to use an API, it is recommended that you read its documentation for guidance on how to get the data you need, even if you already have information about it as there might be some changes since the last time you used it.

According to the documentation from https://wheretheiss.at/w/developer , the API endpoint from which we can get the longitude and latitude is https://api.wheretheiss.at/v1/satellites/25544.

I created a function named "getISS," which fetches the data from the ISS API that we can use for the map. I set the interval to 1 second so that we will have updated data every second as it moves

---

STEP 5: Adding LeafletJS to the Webpage

We will be plotting the map with a library called Leaflet JS. To do so, we first of all have to import the CSS and Javascript CDN into our HTML file, as seen below.

---

STEP 6 : Using the Data we got from the API to Plot the Map with LeafletJS

Now that everything is in place, we can plot our map using the leaflet JS. LeafletJS is an amazing JavaScript library for creating maps and other visuals using Javascript. Just like I said about the APIs, here too, before you are able to use a Javascript library, it is recommended that you read its documentation for step-by-step guidance. I was able to successfully plot the map using the data I got from the API for tracking the current location of the ISS satellite.

As you can see, we have created a single webpage that tracks the current location of the International Space Station (ISS) satellite every second as it moves around the earth. You can use this same method to get data from the API and use it for whatever you want to do. It is important to note that some of the APIs require authentication; thereby, you should request the API keys to be able to use them, which mostly come with a cost. I will continue this series with more mini projects with Javascript.

---

I hope you found this useful. I am Abdul-Salam Issahaku, from Ghana. I am a student web developer and a blockchain enthusiast. I blog about technology and investments. You can follow me to be part of my Hive family. Thank you for your time.

---

All images used in this post are screenshots from visual studio code.