Tracking and visualizing the position of the ISS with 30 lines of JavaScript code

I bring to your attention a translation this great article

In this tutorial, we will create a web application that visualizes the position of any satellite, for example, the International Space Station (hereinafter – ISS), in real time (well, almost).

We will build an application from scratch and try on the role of a real rocket scientist.

  • We will find out where to find the data for an individual satellite, known as two-line element set (TLE) (hereinafter – DNE)
  • We are using the library ”Satellite-js” to predict the satellite’s orbit from the DNE (this part is directly related to rocketry)
  • We are using the library “CesiumJS” to visualize the result, however, you can use any library / engine that can work with longitude, latitude and altitude

Final result preview:

Here we see the movement of the ISS in orbit at a speed 40 times increased. In order to see the current position of the ISS, click on the clock icon in the upper left corner of the control panel.

1. Obtaining the DNE

DNE is a data format describing the movement of an object orbiting the Earth. It was created by the North American Aerospace Defense Command (NORAD). You can read more about the history of its creation. here

Having a description of the orbit, we can predict the location in which the satellite will be located at any time (see below).

This means that most satellite tracking devices do not do so in real time. Instead of receiving continuously updated data, such as when tracking the movement of a car, they use the latest available DNEs to predict the position of an object at a particular point in time.

Where can we get the DNE? There is no global registry with such data. For the publication and updating of these data for the space community, the person who owns this or that satellite is responsible (of course, if we are not talking about a spy satellite).

We can find DNE on the website Space trackwhich is the register of the United States Armed Forces Space Command.

Another resource is this listing on CeleStrak (approx. lane: VPN required to access the site), maintained by Dr. TS Kelso.

We will use the latter as it does not require registration. In order to find the DNE for the ISS, click on the link Space stations

The first on the list will be the ISS:

1 25544U 98067A 21122.75616700 .00027980 00000-0 51432-3 0 9994
2 25544 51.6442 207.4449 0002769 310.1189 193.6568 15.48993527281553

The meanings of these numbers can be found in this table… Most of them are satellite identifiers and metadata, for example, when it was launched.

On the specified resource, you can find DNE for meteorological satellites, GPS satellites and even for global satellite system Starlinkdeployed by SpaceX.

2. Predicting the satellite’s orbit

Our next step is to transform the DNE into a specific position in time.

For this we will use satellite-js

We connect the library from CDN:

Then we give her the DNE and the time:

const ISS_TLE =
`1 25544U 98067A 21122.75616700 .00027980 00000-0 51432-3 0 9994
2 25544 51.6442 207.4449 0002769 310.1189 193.6568 15.48993527281553`;
// Инициализируем запись о спутнике с помощью ДНЭ
const satrec = satellite.twoline2satrec(
// Получаем текущую позицию спутника
const date = new Date();
const positionAndVelocity = satellite.propagate(satrec, date);
const gmst = satellite.gstime(date);
const position = satellite.eciToGeodetic(positionAndVelocity.position, gmst);

console.log(position.longitude); // в радианах
console.log(position.latitude); // в радианах
console.log(position.height); // в км

Now we have the current position of the satellite (new Date()).

This position is the result of building a certain model of the satellite’s motion. This model is called SGP4 / SDP4. All DNEs follow this pattern.

If you are wondering how accurate the above model is, the short answer is: it depends on several factors

The accuracy of the DNE depends on several factors. These factors include the sensors used to collect the data, the amount of data collected about a given type of orbit, the conditions of the space environment, etc. Unfortunately, since these factors are very different for each element of the set, the accuracy is not very high. While NORAD is experimenting to improve the accuracy of satellite prediction, none of the methods are perfect.

3. Visualization of the result

Now we have the ability to get the position of the satellite at a given moment in time. We can use this to animate the path of the satellite.

But first, let’s see how to animate a single point in space using CesiumJS

We connect the library along with the styles:

<script src=""></script>
<link href="" rel="stylesheet">

We create a container:

<div id="cesiumContainer"></div>

Next, we need to initialize the so-called viewer. We pass it several additional settings to disable functionality that requires an access token:

const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.TileMapServiceImageryProvider({
    url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),
  baseLayerPicker: false, geocoder: false, homeButton: false, infoBox: false,
  navigationHelpButton: false, sceneModePicker: false
viewer.scene.globe.enableLighting = true;

Finally, we can visualize the satellite’s position as a red dot in space:

const satellitePoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromRadians(
    position.longitude, position.latitude, position.height * 1000
  point: { pixelSize: 5, color: Cesium.Color.RED }

Here full code for this step on Glitch

4. Animating the path

To animate the path, we just need to get a few more future satellite positions. CesiumJS supports interpolation (transition) between positions over time out of the box.

The animation implementation is somewhat verbose. Here corresponding code on Glitch… The most important concepts are described below.

We create SampledPositionProperty… This is an object containing the positions in time, between which the transition is made:

const positionsOverTime = new Cesium.SampledPositionProperty();

We iterate over positions in any number, and for each position we create an object with time, which is called JulianDate in CesiumJS, as well as the position itself and add them as a sample:

for (let i = 0; i < totalSeconds; i+= timestepInSeconds) {
  const time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
  // Получаем позицию с помощью satellite-js
  const position = Cesium.Cartesian3.fromRadians(p.longitude, p.latitude, p.height * 1000);
  positionsOverTime.addSample(time, position);

Finally, we transmit positionsOverTime to our point:

const satellitePoint = viewer.entities.add({
  position: positionsOverTime,
  point: { pixelSize: 5, color: Cesium.Color.RED }

The point will move with the timeline. To attach the camera to a moving point, do the following:

viewer.trackedEntity = satellitePoint;


I hope you were interested in learning a little about how satellite tracking software is created. Of course, many questions remained unanswered, for example, what does each DNE parameter mean? How often are they updated? How exactly are they updated?

Personally, I was very interested in learning about the existence of such data, how to get and use it directly in the browser using JavaScript.

Here are a couple of ideas for what else you can do about it:

  • Visualization of several satellites, for example, the Starlink satellite system. As a source of inspiration, you can use Celestrak viewershowing each satellite from the catalog. You can, for example, visualize the growth in the number of Starlink satellites over time
  • Tracking and visualization of satellite position at city street level. You can add a search for a building or height with the best conditions for satellite observation

Here prototype of the second idea at Glitch… Demo:.

I also advise you to take a look at the application. “See a satellite tonight”developed by James Darpinian, which uses a combination of CesiumJS and Google Streets.

In addition, those who understand / are fond of 3D modeling can imagine satellites not as points, but in real scale to demonstrate how close to each other they are in space.

Approx. lane: my version of the application looks like this:

Thank you for your attention and have a nice day!

Cloud servers from Macleod fast and safe.

Register using the link above or by clicking on the banner and get a 10% discount for the first month of renting a server of any configuration!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *