let isLoaded = false;

​

let cx, cy, x, y;

​

​

let lat = 31.23,

  lon = 121.47;

​

let clat = 0,

  clon = 0;

​

let first = true;

​

let zoom = 0.5;

​

let wentThrough = false;

​

let input, button, greeting;

let nYT, nYT2, article;

​

let locations = [];

let urls = [];

let dots = [];

​

let l = 0;

​

function preload() {

​

​

  mapimg = loadImage('https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/0,0,0.5,0,0/1024x512?access_token=pk.eyJ1IjoibHVjYXN3b3oiLCJhIjoiY2tkamplN2p3MGZlbzJ4cGZoY24ydHRtYyJ9.8aU7ta9Bli3P45Y51FzFQw', loaded);

}

​

function loaded() {

  isLoaded = true;

}

​

​

function mercX(lon) {

  lon = radians(lon);

  let a = (256 / PI) * pow(2, zoom);

  let b = lon + PI;

​

  return a * b;

}

​

function mercY(lat) {

  lat = radians(lat);

  let a = (256 / PI) * pow(2, zoom);

  let b = tan(PI / 4 + lat / 2);

  let c = PI - log(b);

​

​

  return a * c;

}

​

​

​

function setup() {

  createCanvas(1024, 612);

  background(220);

  if (isLoaded) {

​

    image(mapimg, 0, 0);

​

​

​

    translate(width / 2, height / 2 - 50);

    imageMode(CENTER);

​

​

    cx = mercX(clon);

    cy = mercY(clon);

​

​

    x = mercX(lon) - cx;

    y = mercY(lat) - cy;

​

    //print("x: " + x);

    //print("y: " + y);

​

    fill(255, 0, 255, 200);

    //ellipse(x, y, 20, 20);

  }

​

​

​

  //input = createInput();

  //input.position(20, 560);

​

  button = createButton('generate');

  //button.position(input.x + input.width, 560);

  button.position(20, 560);

​

​

  greeting = createElement('h2', 'Recent publish locations');

  greeting.position(20, 505);

​

  fill(255);

  textAlign(LEFT);

​

  textSize(50);

​

​

​

}

​

function draw() {

  //background(220);

  if (isLoaded) {

    button.mousePressed(getNewArticles);

    //ellipse(x, y, 20, 20);

​

  }

}

​

function mousePressed() {

  for(let i = 0;i<dots.length;i++){

    print("yea");

    dots[i].clicked();

  }

}

​

function getNewArticles() {

​

  nYT = loadJSON("https://api.nytimes.com/svc/news/v3/content/nyt/all.json?api-key=2cE4zxD76zmZGteIW9Ec0E1EPPLNGa7c&limit=500", getLocations);

}

​

function getLocations() {

  locations = [];

  //debugger;

  //print(nYT.results[2].geo_facet);

  for (let i = 0; i < nYT.results.length; i++) {

    if (nYT.results[i].geo_facet != null) {

      locations.push(nYT.results[i].geo_facet);

      urls.push(nYT.results[i].url);

    }

  }

​

  print("locations length: "+locations.length);

  jsonLocations();

}

​

function jsonLocations() {

  //let l = 0;

  print("l: " + l);

  print(locations[l][0]);

  //for (let l = 0; l < locations.length; l++) {

  //let current;

  //while(l < locations.length){

  //if(first === true){

  //first = false;

  //current = l;

  //let mS = millis();

  //let mNow = mS;

​

  //if((millis()-mS)>.5){

  if (locations[l].length >500) {

    print('hi');

    //nYT2 = loadJSON("https://api.nytimes.com/svc/semantic/v2/concept/name/nytd_geo/" + locations[l][i] + "?fields=all&api-key=2cE4zxD76zmZGteIW9Ec0E1EPPLNGa7c", mapLocations);

    for (let i = 0; i < locations[l].length; i++) {

      //nYT2 = loadJSON("https://api.nytimes.com/svc/semantic/v2/concept/name/nytd_geo/" + locations[l][i] + "?fields=all&api-key=2cE4zxD76zmZGteIW9Ec0E1EPPLNGa7c", mapLocations);

    }

  } else {

    print("hi");

    //nYT2 = loadJSON("https://api.nytimes.com/svc/semantic/v2/concept/name/nytd_geo/" + locations[l] + "?fields=all&api-key=2cE4zxD76zmZGteIW9Ec0E1EPPLNGa7c", mapLocations);

    for (let letter = 0; letter < locations[l][0].length; letter++) {

      //print(locations[l][0]);

      //print(locations[l][0].charAt(letter));

      //print(locations[l][0].charAt(letter));

      if (locations[l][0].charAt(letter) === " ") {

        print(locations[l][0].charAt(letter) + 1);

        //locations[l][letter] = "%20";

        locations[l][0] = locations[l][0].substr(0, letter) + "+" + locations[l][0].substr(letter + 1);

​

      }

​

    }

    print(locations[l][0]);

    print("https://maps.googleapis.com/maps/api/geocode/json?address=" + locations[l][0] + "&key=AIzaSyC_X9_RW_IF2Y6NcvVw6pj6kyEX-wZgPGU");

    nYT2 = loadJSON("https://maps.googleapis.com/maps/api/geocode/json?address=" + locations[l][0]+"&key=AIzaSyC_X9_RW_IF2Y6NcvVw6pj6kyEX-wZgPGU",jsonLoaded);

    //print("https://api.mapbox.com/geocoding/v5/mapbox.places/" + locations[l][0] + ".json?access_token=pk.eyJ1IjoibHVjYXN3b3oiLCJhIjoiY2tkamplN2p3MGZlbzJ4cGZoY24ydHRtYyJ9.8aU7ta9Bli3P45Y51FzFQw");

    //nYT2 = loadJSON("https://api.mapbox.com/geocoding/v5/mapbox.places/" + locations[l][0] + ".json?access_token=pk.eyJ1IjoibHVjYXN3b3oiLCJhIjoiY2tkamplN2p3MGZlbzJ4cGZoY24ydHRtYyJ9.8aU7ta9Bli3P45Y51FzFQw",jsonLoaded);

    //debugger;

​

    //wentThrough = true;

​

    //print(nYT2);

  }

​

  //print(locations[l]);

  //nYT3 = loadJSON(nYT2);

  //     debugger;

  //print(nYT2.features[0].center[0]);

  //}

​

​

​

  //}

​

  //}

​

}

​

function jsonLoaded() {

  //wentThrough = true;

  l++;

  //first = true;

  //print("l yo: " + l);

  print(nYT2.results[0].geometry.location.lat);

  print(nYT2.results[0].geometry.location.lng);

  mapLocations();

  if(l<locations.length){

    jsonLocations();

  }

  //debugger;

}

​

function mapLocations(data) {

​

​

  //print(nYT2);

  if (nYT2.results != null) {

    //print(locations);

    //print(nYT2.results[0].geocodes[0].latitude);

    //print(nYT2.results[0].geocodes[0].longitude);

​

    lat = nYT2.results[0].geometry.location.lat;

    lon = nYT2.results[0].geometry.location.lng;

​

    translate(width / 2, height / 2 - 50);

    imageMode(CENTER);

    cx = mercX(clon);

    cy = mercY(clon);

​

    x = mercX(lon) - cx;

    y = mercY(lat) - cy;

    //print(x);

    //print(y);

    dots.push(new Dot(x,y,urls[l]));

    dots[dots.length-1].display();

  }

  //let articles = nYT2[0].results;

  //print(articles);

}

​

​

function Dot(x,y, url){

  this.x = x;

  this.y = y;

  this.url = url;

  this.display = function(){

    fill(0, 0, 255, 200);

    print("X: " + this.x);

    print("y: " + this.y);

    ellipse(this.x, this.y, 10, 10);

  }

  this.clicked = function(){

    //imageMode(CORNER);

    print("yo");

    let d = dist(mouseX,mouseY,this.x+512,this.y+256);

    print(mouseX);

    print(mouseY);

    print(this.x+512);

    print(this.y+256);

    print(d);

    if(d<5){

      print("clicked one");

      window.open(this.url);

    }

  }

}