Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

readme.md

Heroku David Dev Dependencies David Dev Dependencies

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

Looking for every country manually

Gallery

Looking for every country manually

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

First prototype

Iss view of australia

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

Iss view of New Zealand

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

Iss view of Russia

A view of Russia, one of the most photographed country

Iss view of Russia - Image slideshow

Open the slideshow to look at the pictures in large size

Iss view of Brazil

Many time lapses were taken from Brazil

Iss view of Turkey

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

Iss view of Turkey - Image slideshow - Loading

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

Iss view of Turkey - Image slideshow

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.

About

No description, website, or topics provided.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.