Cacher is the code snippet organizer for pro developers

var mapimg;
var montreal = {

  lat: 45.501689,
  long: -73.567256
}


var clat = montreal.lat;
var clon = montreal.long;

var lat = montreal.lat;
var lon = montreal.long;
var zoomLevel = 9;


function preload() {

  mapimg = loadImage("https://api.mapbox.com/styles/v1/mapbox/streets-v10/static/-73.567256,45.501689,9,0.00,0.00/1024x512?access_token=pk.eyJ1IjoiYW50b2luZWZvcnRpbiIsImEiOiJjamYydXlsZzIwNnNlMndwNDUwa3pidXc4In0.a71O-Gs4UX9d2xLh9QaKMg");
}


function mercX(long) {
  long = radians(long);
  var a = (256 / PI) * pow(2, zoomLevel);
  var b = long + PI;
  return a * b;
}

function mercY(lat) {
  lat = radians(lat);
  var a = (256 / PI) * pow(2, zoomLevel);
  var b = tan(PI / 4 + lat / 2);
  var c = PI - log(b);

  return a * c;
}

function setup() {
  createCanvas(1024,512);
  translate(width / 2, height / 2);
  imageMode(CENTER);
  image(mapimg,0,0)




  var cx = mercX(clon);
  var cy = mercY(clat);
  var x = mercX(lon) - cx;
  var y = mercY(lat) - cy;

  for (var i = 0; i < unis.length; i++) {
    var _current = unis[i];

    var cx = mercX(clon);
    var cy = mercY(clat);
    var x = mercX(_current.coordinate.long) - cx;
    var y = mercY(_current.coordinate.lat) - cy;
    fill(_current.color);
    // Then draw it to its x,y position
    ellipse(x,y,20,20);

  }


}

function draw() {
  for (var i = 0; i < unis.length; i++) {
    var _current = unis[i];

    var cx = mercX(clon);
    var cy = mercY(clat);

    var x = mercX(_current.coordinate.long) - cx;
    var y = mercY(_current.coordinate.lat) - cy;

    // For what reason I need to bound them to the center
    x += width / 2;
    y += height / 2;
    ellipse(x,y,5,5);


  }
}

console.log("ss");
var unis = [{
		"name": "McGill",
		"color": "#dc241f",
		"coordinate": {
			"lat": "45.504785",
			"long": "-73.577151"
		},
		"dataSets": [{
				"name": "Students",
				"id": "1"

			},
			{
				"name": "Teachers",
				"id": "1"
			}
		]
	},

	{
		"name": "UQAM",
		"color": "#0079be",
		"coordinate": {
			"lat": "45.512600",
			"long": "-73.560595"
		},
		"dataSets": [{
				"name": "Students",
				"id": "2"

			},
			{
				"name": "Teachers",
				"id": "2"
			}
		]
	},

	{
		"name": "UDM",
		"color": "#000080",
		"coordinate": {
			"lat": "45.505616",
			"long": "-73.613759"
		},
		"dataSets": [{
				"name": "Students",
				"id": "3"

			},
			{
				"name": "Teachers",
				"id": "3"
			}
		]
	},

	{
		"name": "Concordia",
		"color": "#32CD32",
		"coordinate": {
			"lat": "45.497266",
			"long": "-73.579023"
		},
		"dataSets": [{
				"name": "Students",
				"id": "4"

			},
			{
				"name": "Teachers",
				"id": "4"
			}
		]
	}
];