DEV Community

Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

Track International Space Station Location with JavaScript

#javascript #webdev #tutorial

demo

Hello Folks 👋

What's up friends, this is SnowBit here. I am a young passionate and self-taught developer and have an intention to become a successful developer.

Today, I am here with an amazing topic that will be fun sharing 🛰

What is ISS?

The International Space Station is a modular space station in low Earth orbit. It is a multinational collaborative project involving five participating space agencies: NASA, Roscosmos, JAXA, ESA, and CSA. The ownership and use of the space station is established by intergovernmental treaties and agreements.

Source Wikipedia

Let's get on to the code 😎

Step 1 - Map

  • Go to Mapbox and create account
  • Copy and save your public token access token

Step 2 - Import Mapbox 

<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
Enter fullscreen mode Exit fullscreen mode

Paste this in the <head> tag of your .html file

Step 3 - Setting map

In your Javascript file.

mapboxgl.accessToken = 'YOUR_PUBLIC_TOKEN'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/dark-v10', center: [-74.5, 40], zoom: 0 });
Enter fullscreen mode Exit fullscreen mode

Display map

const ISSLoc = (lng, lat) => { const geojson = { type: 'FeatureCollection', features: [ { type: 'Feature', geometry: { type: 'Point', coordinates: [lng, lat] }, properties: { title: 'Mapbox', description: 'San Francisco, California' } }, ] }; for (const feature of geojson.features) { const el = document.getElementById('marker'); new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map); } new mapboxgl.Marker(el) .setLngLat(feature.geometry.coordinates) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML( `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>` ) ) .addTo(map); new mapboxgl.Marker(el) .setLngLat(feature.geometry.coordinates) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML( `<h3>${feature.properties.title}</h3><p>${feature.properties.description}</p>` ) ) .addTo(map); }
Enter fullscreen mode Exit fullscreen mode

Step 4 - Styling popups

In your CSS file.

.marker { background-image: url('sat.png'); background-size: cover; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; } .mapboxgl-popup { max-width: 200px; } .mapboxgl-popup-content { text-align: center; font-family: 'Open Sans', sans-serif; }
Enter fullscreen mode Exit fullscreen mode

Image file: sat.png

Step 5 - Get ISS Position 

const getISSLoc = () => { fetch('https://api.wheretheiss.at/v1/satellites/25544') .then(response => response.json()) .then(data => { ISSLoc(data.longitude, data.latitude) long = data.longitude latt = data.latitude }) }
Enter fullscreen mode Exit fullscreen mode

Update ISS Position every second

const updateISSLoc = () => { setInterval(() => { getISSLoc() }, 1000 ) } updateISSLoc()
Enter fullscreen mode Exit fullscreen mode

And you made it 👏

Check out the full source code: https://github.com/codewithsnowbit/ISS-Live-Location

Thank you for reading, have a nice day!
Your appreciation is my motivation 😊

Top comments (0)