let input_country_code;

let myInput;

let button;

​

function preload() {

  airportsCSV = loadTable('airports.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(800, 400); 

  background(0);

​

  // input field for country code

  myInput = createInput();

  myInput.position(0, 380);

  myInput.style('width', '40px')

  myInput.style('height', '10px')

  myInput.style('background', 'black')

  myInput.style('color', 'rgb(255,255,95)')

  myInput.style('border', ' 0.1px solid rgb(255,255,95)')

  myInput.style('padding', '5px')

  // decided to add button to create this trigger to avoid infinite output inside the loop

  button = createButton('Display Airports Names');

  button.position(52, 380)

  button.style('background', 'black')

  button.style('color', 'rgb(255,255,95)')

  button.style('border', ' 0.1px solid rgb(255,255,95)')

  button.style('width', '200px')

  button.style('height', '21px')

  button.mouseOver(highlight_button) // enhancing design by changing the style of the button when mouse is over it

  button.mouseOut(default_button) // changing style back when the mouse in not over it

  button.mouseClicked(show_airports) // output of the airports when clicking the button

}

​

function draw() {

  background(0);  // renewing background after each frame to remove the highlighted dots after the name of the chosen country is removed

  input_country_code = myInput.value();

​

  // looping through the uploaded file and plugging out the values

  for (let i = 0; i < airportsCSV.getRowCount(); i++) {

    let latitude = airportsCSV.getNum(i, 'latitude'); 

    let longitude = airportsCSV.getNum(i, 'longitude');

    let country_code = airportsCSV.getString(i, 'country_code');

    // let one_airport_name = airportsCSV.getString(i, 'airport') // unfinished idea of displaying the name of the airport at which I point with the mouse

    // using already familiar map function to adjust coordinates of airports to the dimensions of our canvas

    let x = map(longitude, -180, 180, 0, width);  // longitude is our x-axis

    let y = map(latitude, 90, -90, 0, height);    // latitude is our y-axis

​

    // if user input the existing country code, highlight the airports in this country with green

    if (country_code === input_country_code) {

      fill('rgb(0,255,0)');  // Green for matching airports

      noStroke();

      ellipse(x, y, 2, 2);

    } else { // by default all yellow - nice color reminding of the night flights

        fill('rgb(255,255,95)');

        noStroke();

        ellipse(x, y, 1, 1);

    }

    /* if (dist(mouseX, mouseY, x, y) < 5) {

      console.log(one_airport_name) 

    } */ // idea of displaying airport names when pointing at them on the canvas

  }

}

​

function show_airports() { 

  console.log('Airports in this country:');

​

  // If user not only input the country code but also pressed the button, display the names of airports in this country in the console

  for (let j = 0; j < airportsCSV.getRowCount(); j++) {

    let iterating_country_code = airportsCSV.getString(j, 'country_code');

    let iterating_airport = airportsCSV.getString(j, 'airport');

    if (iterating_country_code === input_country_code) {

      console.log(iterating_airport);

    }

  }

}

​

function highlight_button() { // changing style of the button when mouse is over it

  button.style('background', 'rgb(255,255,95)')

  button.style('color', 'black')

  button.style('border', ' 0.1px solid rgb(0,255,0)')

}

​

function default_button() { // default style, whenever the mouse is not pointing at the button

  button.style('background', 'black')

  button.style('color', 'rgb(255,255,95)')

  button.style('border', ' 0.1px solid rgb(255,255,95)')

}