// let baseURL = "https://bikewise.org/api/v2/swagger_doc";

let requestURL = "https://bikewise.org:443/api/v2/locations?proximity=40.730610%2C%20-73.935242&proximity_square=100";

​

// Locations of bike lanes and routes throughout the City

 let bikeRoutes = "https://data.cityofnewyork.us/resource/cc5c-sm6z.json";

​

let crashesURL = "https://bikewise.org:443/api/v2/locations/markers?incident_type=crash&proximity=new%20york%20city&proximity_square=100&all=true";

// NYC Lat & Lon 

  //var latlng = L.latLng(40.730610, -73.935242);

​

//let map;

​

let bikeAccidents;

let FeatureCollection = [];

let propertiesCount = [];

​

var id = []; //

var propertiestype = [];

var occurred_at = [];

var coordinates = [];

​

let bikeAccidentsData;

let crashesData;

let data;

//let polygons;

let Point;

​

let sel;

let font;

​

let displayTypeB = [];

let displayXX = [];

let displayYY = [];

​

let displayType = [];

let displayX = [];

let displayY = [];

​

let geojsonFeature;

//let (t.addLayer);

​

//Here we're using the pointToLayer option to create a CircleMarker:

// var geojsonMarkerOptions = {

//   radius: 8,

//   fillColor: "#ff7800",

//   color: "#000",

//   weight: 1,

//   opacity: 1,

//   fillOpacity: 0.8

// };

​

function preload() {

  bikeAccidentsData = loadJSON(requestURL, 'header');

  loadJSON(requestURL, getData);

  //  crashesData = loadJSON(crashesURL, 'header');

  // loadJSON(crashesURL.getCrashData);

  // console.log(crashesData);

  // bikeRoutes = loadJSON(bikeRoutes)

  // loadJSON(bikeRoutes, getData);

 // console.log(bikeRoutes);

​

  font = loadFont('VeganStylePersonalUse-5Y58.ttf');

}

​

function setup() {

//   noCanvas();

//   //L.map() instantiates a map object within the div 'mapid'

//   //setView sets the view of the map with geographical center and zoom level

//   var map = L.map('mapid').setView([40.730610, -73.935242], 10);

​

//   //L.tileLayer instantiates a tile layer object given a URL template

//   //attribution holds string to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.

//   L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

//     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

//   }).addTo(map);

​

//   //L.Marker is used to display clickable/draggable icons on the map

//   L.marker([40.730610, -73.935242]).addTo(map)

//     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')

//     .openPopup();

    //L.geoJSON(geojsonFeature).addTo(map);

​

  createCanvas(800, 800);

  sel = createSelect();

  sel.position(700, 750);

  sel.option("Theft");

  sel.option('Unconfirmed');

  sel.changed(incidentType);

​

  let inp = createInput('');

  inp.input(searchArea);

  inp.position(20, 750);

  h1 = "Search Area Here";

​

  console.log(bikeAccidentsData);

}

​

function searchArea() {

  console.log('Searching in', this.value());

}

​

function incidentType() {

  let item = sel.value();

  background(0);

  text(item + "crash" + '!', 500, 550);

}

​

function draw() {

 background(0, 204, 255);

   push();

textFont(font);

  textSize(55);

  fill(0);

  fill('#CC0');

  stroke('#FFF');

  textSize(30);

  textAlign(CENTER);

  text("Bicycle Incidents NYC",450,100,100,200);

​

  textSize(50);

  text("Be Bike Wise", 180, 80);

  pop();

   translate(width/1.2, height/1.2);

​

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

ellipse((displayX[i]+72)*160, (displayY[i]-41)*300, 20, 20);

// ellipse((displayX[i]+72)*300, (displayY[i]-41)*300, 20, 20);

    text(displayType[i], (displayX[i]+72)*150, (displayY[i]-41)*300);

//     console.log(displayType);

  }

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

//     ellipse((displayX[i]+122)*100, (displayY[i]-45)*100, 10, 10);

//   text(displayType[i], displayX[i], displayY[i]);

//     ellipse((displayX[i]+122)*100, (displayY[i]-45)*100, 10, 10);

//     //console.log(displayType);

//   }

//   // displayong another data set

//   for (let j = 0; i < displayType.length; j ++){

// ellipse((displayXX[j]), (displayYY[j]), 20, 20);

//  ellipse((displayXX[j]+72)*200, (displayYY[j]-41)*200, 20, 20);

//     text(displayType[j], displayXX[j], displayYY[j]);

//   color(0);

// }

   var name = data.features[j];

    for (var j= 0; i < data.features[4].length; j++){

      createElement('h1',data.features[4].geometry.coordinates[0]);

      createP(name[i].coordinates);

    }

​

  var w = width / data.features.properties.type;

  for (var k = 0; k < data.features.properties.type.length; k++){

  var types = type[k];

    var num = counts[type].total;

    var h = map(num, 0, 'crash', 0, 300);

    fill (200);

    rect(k*w, height-h, w-1, h);

    var crashCounts = counts[types].crash;

    var crash = object.keys(crashCounts);

     fill (255);

  text('', k*w, height - h - 5);

  }

​

}

​

function getData(data) {

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

 // console.log(i);

  displayType.push(data.features[i].properties.type);

​

  displayX.push(data.features[i].geometry.coordinates[0]);

​

  displayY.push(data.features[i].geometry.coordinates[1]);

  displayType.push(data.features[i].title);

}

//   function getCrashData(data){   

//       for (let j = 0; j < data.features.length; j++){

//  // console.log(i);

//   displayTypeB.push(data.features[j].properties.type);

​

//   displayXX.push(data.features[j].properties.geometry.coordinates[0]);

​

//   displayYY.push(data.features[j].properties.geometry.coordinates[1]);

//   displayTypeB.push(data.features[j].title);

​

//   }

   // }

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

​

//   for (let j = 0; j < data.features.length; j++) {

//     fill(feature[3].geometry.coordinates[j]);

//     rotate(2 * PI / features.length * j); 

//     ellipse(300, 100, 20);

// //     let s = "[j]";

// // fill(50);

// // text(s, 10, 10, 70, 80);

// text('this is it', 120, 120); // adding count as text next to each ellipse

}

​