readme.md

Installation

git clone https://github.com/vogelino/explore-with-iss.git
cd explore-with-iss
npm install

Use

Run npm start and open http://localhost:3003 Or run npm run watch and open http://localhost:3003 for development

---

Explore with the International Space Station

This live data visualization was done at the course “Input Output - Introduction to process-oriented design” supervised by Fabian Morón Zirfas.

This project based itself on the statement:

The ISS travels fast around the globe, visiting numerous countries more often than you will never be able to.

The result is a web experiment offering the possibility to:

Follow the ISS and learn about the countries it flies over.

This web app shows the ISS at its live position mapped on earth. When the iss flies over a country:

• The Borders of this country are highlighted
• A sidebar appears with following informations
  • Flag, Name and native name of the country
  • General country information
    • Capital
    • Population
    • Area
    • Language(s)
    • Gini index
    • Currency(ies)
    • Timezone(s)
    • Calling prefix(es)
    • Top level domain(s)
  • Pictures taken of this country by the ISS -- The pictures are also geo-located on the map
  • Hot news related to this country

This allows the user to travel and explore countries side by side with the ISS.

The following (initially planned) feature and information-display could not be implemented yet: – Showing the Next overflight that will happen over the country. – Implementing a pause feature that would allow the user to stay on the country and let the ISS fly further and then catch it up later on.

As additional fancy feature, the color of the links and borders are country-specific as they are based on the flag color.

The tech part

This project contains client and server side rendering:

• The Front-end client, which application's structure is build with Redux, takes care of rendering the React components.
• The Back-end, which calls other external APIs, to load and process file based datasets and GEOjson files and notifies the client(s) with socket.io.

See it in movement

Gallery

To find all images concerning countries all around the world, I had to manually include all of the in the search field of the [_Gateway to Astronaut Photography of Earth_](http://eol.jsc.nasa.gov/) and then import the results with [import.io](https://www.import.io/)

First prototype

A view of Australia (I.e. There's no pictures available for this country)

A view of New Zealand (As we see, the links and borders are always different, picking a vibrant color of the flag for it)

A view of Russia, one of the most photographed country

Open the slideshow to look at the pictures in large size

Many time lapses were taken from Brazil

Look at the correspondence between the dot on the map and the picture

When the image loads it appears blurry and a tiny animated loading icon is displayed

Some pictures are really impressive

Back-end calls to external APIs

getIssPosition: params: none

getIssPosition makes a request to the Open notify API and retrieves the actual latitude and longitude of the International Space Station

getIssCountryCode: params: none

getIssCountryCode makes a request to the Open notify API first, and then requests the Geonames API to map the ISS position to the country it belongs to. It retrieves the latitude, longitude and the alpha code of the country.

getCountryInfo: params: country_code

getCountryInfo is the most complex call as it combines many sources of information. It requires an alpha code as unique argument. The call processes the following filtering, data gathering and formatting operations:

• It loads a GEOjson file containing the shapes of the borders of all countries and finds the relevant one.
• It loads a json file containing all pictures of all ISS missions and filters the ones corresponding to the relevant country.
• It calls the RestCountries API to gather basic data about the country (name, language, currency, etc.)
• It calls the Faroo API to get all news related to this country getCountryInfo returns a formatted json with all concatenated informations.

getIssCountry: params: none

getIssCountry first calls getIssCountryCode and then uses the alpha code response to request getCountryInfo. It is the most complete call. It retrieves a full response with all informations available, without needing to know the actual country code or position.