Track International Space Station Location with JavaScript

Photo by SpaceX on Unsplash

Track International Space Station Location with JavaScript


2 min read


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=''></script>
<link href='' rel='stylesheet' />

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 

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)
        new mapboxgl.Popup({ offset: 25 }) // add popups
      new mapboxgl.Marker(el)
    new mapboxgl.Popup({ offset: 25 }) // add popups

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;

Image file: sat.png

Step 5 - Get ISS Position

const getISSLoc = () => {
    .then(response => response.json())
    .then(data => {
        ISSLoc(data.longitude, data.latitude)
        long = data.longitude
        latt = data.latitude

Update ISS Position every second

const updateISSLoc = () => {
    setInterval(() => {
    }, 1000  )

And you made it ๐Ÿ‘

Check out the full source code:

Thank you for reading, have a nice day! Your appreciation is my motivation ๐Ÿ˜Š