​

function preload() {

  mapimg = loadImage('NYCmap.jpg'); // name of map image file name

}

function setup() {

  createCanvas(550, 600); // determine image size, image will scale to fit

  for (var i = 0; i < 100; i++) {

    marks[i] = new mark();

  }

//   input = createInput();

//   input.position(20, 35);

​

//   button = createButton('submit');

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

//   button.mousePressed(mark);

  textSize(32);

}

​

function mousePressed() {

  marks.push(new mark(mouseX, mouseY));

​

}

​

function draw() {

  background(220);

  image(mapimg, 0, 0, width, height);

  for (var i = 0; i < marks.length; i++) {

    marks[i].display();

  }

}

​

function mark(x,y) {

  this.x = x;

  this.y = y;

  this.display = function() {

    stroke(255, 0, 0);

    text('!', this.x, this.y);

  }

}