41/1903 API and Movable Map

mySketch
xxxxxxxxxx
 
var NUMRECORDS = 100; // this is how many records
var NYCAPIURL = 'https://data.cityofnewyork.us/resource/43nn-pn8j.json'; // restaurant inspection database
var GEOCODEURL = 'https://www.mapquestapi.com/geocoding/v1/batch?key=rDz5dqQpjbkQxzs1ktmvT3qcaw0QTxNf&inFormat=kvp&outFormat=json&thumbMaps=false';
var thestuff = {};
var locationdata = {};
var isready = false;
​
var fontsize = 3;
​
var tx = 0;
var ty = 0;
var s = 1.0;
var d = 0.25; // distance to drop shadow
var t = 0; // angle of drop shadow
​
function preload() {
  NYCAPIURL+='?$limit='+NUMRECORDS;
  thestuff = loadJSON(NYCAPIURL, goforit);
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  stroke(0);
  fill(0);
  textSize(fontsize);
}
​
function draw() {
  if(isready)
  {
    background(0);
    resetMatrix(); // just in case
    translate(width/2,height/2); // 0, 0 is the middle
    scale(s, s);
    translate(tx, ty);
    
    let x;
    let y;
    let str1,str2,str3;
    noStroke();
    for(let i =0;i<NUMRECORDS;i++)
    {
      x = map(thestuff[i].lng, thestuff.lngmin, thestuff.lngmax, -width/2, width/2);
      y = map(thestuff[i].lat, thestuff.latmin, thestuff.latmax, height/2, -height/2);
      noFill();
      stroke(0);
      ellipse(x, y, 20+(d*cos(t)), 20+(d*sin(t)));
      noFill();
      stroke(255);
      ellipse(x, y, 20, 20);
      
      str1=thestuff[i].dba;
      str2=thestuff[i].cuisine_description;
      str3=thestuff[i].violation_description;
      noStroke();
      fill(0);
      text(str1, x+5+(d*cos(t)), y-fontsize+(d*sin(t)));
      text(str2, x+5+(d*cos(t)), y+(d*sin(t)));
      text(str3, x+5+(d*cos(t)), y+fontsize+(d*sin(t)));
      noStroke();
      fill(255);
      text(str1, x+5, y-fontsize);
      text(str2, x+5, y);
      text(str3, x+5, y+fontsize);
    }
    t+=0.1;
    if(keyIsDown(187)) s+=1.1; // + key
    if(keyIsDown(189)) s/=1.1; // - key
    if(keyIsDown(LEFT_ARROW)) tx+=20/s;
    if(keyIsDown(RIGHT_ARROW)) tx-=20/s;
    if(keyIsDown(UP_ARROW)) ty+=20/s;
    if(keyIsDown(DOWN_ARROW)) ty-=20/s;
  }
}
​
function goforit() { // response function
  dogeocode();
}
​
function dogeocode() {
  for(let i =0;i<NUMRECORDS;i++)
  {
    let a = thestuff[i].building + ' ' + thestuff[i].street + ' ' + thestuff[i].boro + ' ' + thestuff[i].zipcode;
    GEOCODEURL+='&location='+a;
  }
  locationdata = loadJSON(GEOCODEURL, geocoded);
}
​
function geocoded()
{
  thestuff.latmin = 1000; // start too high
  thestuff.latmax = -1000; // start too low
  thestuff.lngmin = 1000;
  thestuff.lngmax = -1000;
  for(let i = 0;i<NUMRECORDS;i++)
  {
    thestuff[i].lat = locationdata.results[i].locations[0].latLng.lat;
    thestuff[i].lng = locationdata.results[i].locations[0].latLng.lng;
  }
  thestuff.latmin = 40.7527 - 0.2;
  thestuff.latmax = 40.7527 + 0.2;
  thestuff.lngmin = -73.9772 - 0.2;
  thestuff.lngmax = -73.9772 + 0.2;
  isready = true;
}