cross domain call with jsonp

To call the open-notify.org API ISS now from any domain we need to make a cross domain call. This is normally restricted. Luckily the open-notify.org API allows to make JSONP calls. See this stackoverflow for further insight.

It's important that you have the this line in your index.html file:

<script src="http://api.open-notify.org/iss-now.json?callback=getData"></script>

This technique should also work for the pass time and the astros API.

sketch.js

var iss;
var x, y;
var worldmap;

/**
 * getData calls the the JSONP API of open notify
 */
function getData(data) {
  iss = data;
}
/**
 * just to see the date
 * taken from
 * http://stackoverflow.com/questions/847185/convert-a-unix-timestamp-to-time-in-javascript
 */
function timeConverter(UNIX_timestamp) {
  var a = new Date(UNIX_timestamp * 1000);
  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  var year = a.getFullYear();
  var month = months[a.getMonth()];
  var date = a.getDate();
  var hour = a.getHours();
  var min = a.getMinutes();
  var sec = a.getSeconds();
  var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min + ':' + sec;
  return time;
}

function setup() {
  worldmap = loadImage('world-map.png'); // load the image
  console.log('We received the data from the ISS location via a jsonp callback');
  console.log(timeConverter(iss.timestamp)); // log the time
  console.log(iss);// log the data
  var canvas = createCanvas(360, 180); // draw the canvas
  canvas.parent('sketch');
  var lat = iss.iss_position.latitude; // get lat of the current position
  var lon = iss.iss_position.longitude;// get lat of the current position
  x = map(lon, -180, 180, 0, width); // map lon to x on our canvas
  y = map(lat, 90, -90, 0, height);// map lat to y on our canvas
}

function draw() {
  // draw all that stuff
  background(0);
  image(worldmap, 0, 0);
  ellipse(x, y, 10, 10);



}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{page.title}</title>
    <meta name="description" content="something">
    <meta name="author" content="me">
  </head>
  <body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
    <script src="sketch.js"></script>
    <script src="http://api.open-notify.org/iss-now.json?callback=getData"></script>
    <div id="sketch"></div>
  </body>
</html>