// https://thecodingtrain.com/CodingChallenges/057-mapping-earthquake-data.html

// Icon made by Freepik from Flaticon is licensed by CC 3.0 BY

​

let mapImg;

let satImg;

​

let clat = 0;

let clon = 0;

​

let prevX = 0;

let prevY = 0;

​

let ww = 1024;

let hh = 512;

​

let zoom = 1;

​

function preload() {

  mapImg = loadImage(`https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/${clon},${clat},${zoom}/${ww}x${hh}?access_token=pk.eyJ1IjoiY29kaW5ndHJhaW4iLCJhIjoiY2l6MGl4bXhsMDRpNzJxcDh0a2NhNDExbCJ9.awIfnl6ngyHoB3Xztkzarw`);

  satImg = loadImage("satellite.png");

}

​

function setup() {

  createCanvas(ww, hh);

  noLoop();

  getPosition();

}

​

function getPosition() {

  fetch('https://api.wheretheiss.at/v1/satellites/25544') //or http://api.open-notify.org/iss-now.json

    .then(response => response.json())

    .then(data => {

      show(data.iss_position || data);

​

      setTimeout(() => {

        getPosition();

      }, 5000);

    })

    .catch(err => console.error(err));

}

​

function show(pos) {

  push();

  translate(width / 2, height / 2);

  imageMode(CENTER);

  image(mapImg, 0, 0);

  angleMode(RADIANS);

​

  let lat = pos.latitude;

  let lon = pos.longitude;

​

  let x = mercX(lon) - mercX(clon);

  let y = mercY(lat) - mercY(clat);

​

  // This addition fixes the case where the longitude is non-zero and

  // points can go off the screen.

  if (x < -width / 2) x += width;

  else if (x > width / 2) x -= width;

​

  translate(x, y);

  rotate(createVector(x - prevX, y - prevY).heading() + PI / 4);

  image(satImg, 0, 0, 25, 25);

​

  prevX = x;

  prevY = y;

​

  pop();

}

​

function mercX(lon) {

  return (256 / PI) * pow(2, zoom) * (radians(lon) + PI);

}

​

function mercY(lat) {

  return (256 / PI) * pow(2, zoom) * (PI - log(tan(PI / 4 + radians(lat) / 2)));

}