git clone https://github.com/vogelino/explore-with-iss.git
cd explore-with-iss
npm install
Run npm start
and open http://localhost:3003
Or run npm run watch
and open http://localhost:3003
for development
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.
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.
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
getCountryInfo
returns 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.