​

var myMap;

​

var dots = [];

​

function preload() {

  myMap = loadImage(mapUrl);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); //responsive

  background(20);

  imageMode(CENTER);

  image(myMap, windowWidth / 2, windowHeight / 2);

​

  textAlign(CENTER);

  textSize(30);

  fill('#0e98fb');

  text("Fishing spots", windowWidth / 2, 50);

  textSize(12);

  text("Mark your favorite fishing spots", windowWidth / 2, 70);

​

​

  btnSaveInput = createButton('Submit');

  btnSaveInput.position(windowWidth / 2 - btnSaveInput.width / 2, windowHeight - 80);

  btnSaveInput.mousePressed(saveInput);

​

}

​

function draw() {

​

}

​

function mousePressed() {

​

  var dot = new Dot(mouseX, mouseY, 10, color(0));

  dot.show();

  dots.push(dot);

​

}

​

​

function saveInput() {

​

  dataTable = new p5.Table();

  dataTable.addColumn('latitude');

  dataTable.addColumn('longitude');

​

  //Extract coordinates from staticmap 

  var split1 = split(mapUrl, '/');

  var split2 = split(split1[8], '[');

  var split3 = split(split2[1], ']');

  var urlCoord = split(split3[0], ',');

​

  var mapPosXmin = (windowWidth / 2) - (myMap.width / 2);

  var mapPosYmin = (windowHeight / 2) - (myMap.height / 2);

  var mapPosXmax = (windowWidth / 2) + (myMap.width / 2);

  var mapPosYmax = (windowHeight / 2) + (myMap.height / 2);

​

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

​

    var pointLat = map(dots[i].y, mapPosYmax, mapPosYmin, float(urlCoord[1]), float(urlCoord[3]));

    var pointLng = map(dots[i].x, mapPosXmax, mapPosXmin, float(urlCoord[2]), float(urlCoord[0]));

​

    var tableRow = dataTable.addRow();

    tableRow.setString('latitude', pointLat.toString());

    tableRow.setString('longitude', pointLng.toString());

  }

​

  saveTable(dataTable, 'new.csv');

​

  //to be implented later

  // save data to server Fire Base: 

  //https://www.youtube.com/watch?v=JrHT1iqSrAQ - 

​

}