Show ISS current position using ionic

January 8, 2016

Ionic is an HTML5 hybrid framework based on Cordova and Angular which allows you to build native mobile applications for Android, iOS and Windows Phone. In this tutorial, we will show you step-by-step how to use streamdata.io in an Ionic application to display the ISS position on a map in real-time.

If you just want to run the sample, after having installed Ionic and cloned the GitHub repository, you just need to:

Install Ionic and every dependencies needed

1 - Create the Ionic application

Start a new project based on the maps template by running ionic start iss.io maps. This will build an Ionic project which displays a map.

If you're working on Mac OS X, iOS platform has automatically been added to your project.

To add Android platform, run ionic platform add android.

You can run your application in your browser with ionic serve command, in an emulator with ionic emulate [platform] or in your device with ionic run [platform]. If you want to read more about those commands and their options, have a look here for serve and here for emulate and run.

When you run it for the first time, you should see a map centered on Ionic's headquarters, a header bar with title "Map" and a footer bar with a "center on me" button.

2 - Customize the application to match our needs

For our purpose, we need to display the map a little bit differently. Open the directives.js file in the www/js folder and follow steps below:

First of all, we're going to extract the latitude, longitude and the LatLng object in variables as we're going to reuse them. As we don't know the exact position of the ISS at the moment, let's use Cap Canaveral's coordinates to start:

You can also replace the header bar title in index.html by something more relevant like ISS Position, and remove the code related to the footer bar and the "center on me" button for more readability if you prefer.

3 - Setting up the Streamdata.io event-source

In order to use the Streamdata.io proxy, you need an App Token. Register on the Portal to create an account and get a valid token. The Streamdata.io request for the ISS position looks like this: