ISS Fly Over

ISS = International Space Station

Earlier this week someone came into my office at work and asked to borrow three of our beanbags, so they could have recently returned astronauts sit in them while doing a facebook live-stream event. Apparently, it has become tradition. That prompted me to google ISS fly over application. I heard NASA had put out the code that runs their “check when the International Space Station will be in view from your location” webpage. Unfortunately, my impression wasn’t quite correct. What was provided wasn’t the code for their webpage or the application that does the calculations but merely an embed code snippet that lets you put an iframe in your own webpage to theirs. Basically, it is a well-built window from this webpage into their webpage.

<div style=”display: inline-block; border: 1px solid #CCC; border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; position: relative; overflow: hidden; width: 310px; height: 450px;“>
<iframe src=“https://spotthestation.nasa.gov/widget/widget.cfm?country=United_States&amp;region=Texas&amp;city=Houston” width=”310″ height=”450″ frameborder=”0″></iframe&gt&lt/div>

Orange = HTML, the pieces that make up the webpage. Boxes inside boxes with rules about where those boxes sit and their properties.

Purple = URL, or address the browser goes to in order to ask politely for the NASA data to build the little ISS flyover screen.

Green = CSS, the style rules.

For example, we can get second by second updates on the lat and long of the International Space Station below.

The ISS is currently over ?° N, ?° E

The line above is generated using the following code:

<p style=”text-align: center;”>The ISS is currently over <span id=”isslat”>?</span>° N, <span id=”isslon”>?</span>° E</p>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js“></script>

<script>
     function getISS () { $.getJSON(‘http://api.open-notify.org/iss-now.json?callback=?’,

          function(data) { var lat = data[‘iss_position’][‘latitude’]; var lon = data[‘iss_position’][‘longitude’];

                    $(‘#isslat’).html(Math.round(lat*1000)/1000.0); $(‘#isslon’).html(Math.round(lon*1000)/1000.0);

          });

     setTimeout(getISS, 3000); }

     getISS();

</script>

Similarly to the first code block, there is html (orange), an URL (purple), and CSS (green). What is different is between the second pair of <>opening and </>closing orange <script> tags we also have some JavaScript code in blue. JavasScript is the computer language that runs in your browser. You may or may not have python or some other language installed on your computer (perhaps as a default install by the company you bought it from), but any computer with a browser can run JavaScript. This particular JavaScript script does three things.

• First, “function getISS ()”  establishes the name of the function, “getISS“. What is between the { } directly after function getISS () is the code that runs when the function is called. In the last blue line, the function name getISS() is called and the function executes.
• Next, inside the getISS function is $.getJSON. The $ sign tells a library called Jquery to run. Jquery was previously downloaded to run locally using <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js“></script>. Jquery knows that $.getJSON means to send a request to the following URL in purple and expect to get JSON formatted data back from that server.
• The next JavaScript function in blue (function(data) { var lat = data[‘iss_position’][‘latitude’]; var lon = data[‘iss_position’][‘longitude’]; ) takes that JSON data, labeled here as “data“, pulls out the parts representing lat and long and turns them into variables we can use later in the code.
• Those two variables are referred to in the next bit of JavaScript ($(‘#isslat’).html(Math.round(lat*1000)/1000.0); $(‘#isslon’).html(Math.round(lon*1000)/1000.0); }); ) where the variables are changed into easier to read format using some math and then switched out in place of for the “?” in the following HTML (<span id=”isslat”>?</span>° N, <span id=”isslon”>?</span>) the script knows where to put them as the # in the script is equivalent to the id= in html. 

Leaflet.js

Regenerating lat and long as digits is kinda boring though, so we’re going to put those on a map so we can see exactly where the ISS is over right now. We’re also going to have the map add a new marker every three seconds to get an idea just how fast the ISS is moving. We’re going to do this with another JavaScript library called leaflet.js.

Here it is at a large scale. Note, it initially takes three to five seconds for the first ISS lat and long position to load to the map. If you zoom in, you can more clearly see the ISS moving. If you leave it up for a while, you’ll get a line of markers stringing across the globe, which gives you a good idea how fast 17,150 miles per hour or slightly more than 5 miles a second actually is. The Space Station orbits Earth once every 92 minutes.