git clone https://github.com/vogelino/explore-with-iss.git cd explore-with-iss npm install
npm start and open
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
- Gini index
- 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
Galleryhttp://eol.jsc.nasa.gov/) and then import the results with [import.io](https://www.import.io/)
Back-end calls to external APIs
getIssPosition makes a request to the Open notify API and retrieves the actual latitude and longitude of the International Space Station
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 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
getCountryInforeturns a formatted json with all concatenated informations.
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.