geo-data from server

This example shows how to load a .json file. The file contains locations of the ISS. The mapping like this only works on an equirectangular map.

sketch.js

// Latitude, Longitude: 52.41369, 13.04992
// is somewhere here in Berlin


var x = 0;
var y = 0;
var mymap = null;
var data = null;
var maxpoints = 600;
function preload(){
  data = loadJSON("iss-now.json");

}
// getting started with p5js
function setup() {
  // executed once
  colorMode(HSL, 360,100,100,100);
  mymap = loadImage("world.png");
  var canvas = createCanvas(1280, 640);
  canvas.parent('sketch');

}

function draw() {
  tint(225, 20, 50);
  image(mymap, 0, 0);
  if(maxpoints >= data.length){
    maxpoints = data.length;
  }
  var step = 360/maxpoints;
  for(var i = 0; i < /*data.length*/ maxpoints;i++){
    fill(step*i,60,70,100);
    var pos = data[i].iss_position;
    var lat = pos.latitude;
    var lon = pos.longitude;
      x = map(lon, -180, 180, 0, width);
      y = map(lat, 90, -90, 0, height);
  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="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
    <div id="sketch"></div>
  </body>
</html>

iss-now.json

The File iss-now.json is to big to be displayed here.