earthquake.js

// https://api.mapbox.com/styles/v1/mapbox/streets-v8/static/0,0,2/600x600?access_token=pk.eyJ1IjoiY29kaW5ndHJhaW4iLCJhIjoiY2l6MDJ0Mjk5MDQ1dzJ3bzRiM29zaW16ayJ9.guiqnHMGUq196Zxa1d3UPg

var mapimg;
var zoom = 1;
var data;
var ww = 1280;
var hh = 1280;
var token = 'pk.eyJ1IjoiaHlvamp4aXBpdHVnIiwiYSI6ImNpejBjZjRqNjAwMWozM3BheWhxMnVzcjUifQ.9uCzXO3rlwFIvi9lp7cT1g';
//var token = 'pk.eyJ1IjoiY29kaW5ndHJhaW4iLCJhIjoiY2l6MDJ0Mjk5MDQ1dzJ3bzRiM29zaW16ayJ9.guiqnHMGUq196Zxa1d3UPg';

// testing cities display in all four quadrants (NW, NE, SW, SE)
var cities = [
   [40.7128, -74.0059], // New York 40.7128° N, 74.0059° W
   [-34.6037, -58.3816], // Buenos Aires 34.6037° S, 58.3816° W
   [55.7558, 37.6173], // Moscow 55.7558° N, 37.6173° E
   [-33.8688, 151.2093] // Sidney 33.8688° S, 151.2093° E
];


function preload() {
   var query = 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/0,0,1/' + ww + 'x' + hh + '?access_token=' + token;
   console.log(query);
   mapimg = loadImage(query);
   data = loadStrings('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv');
}

// Web Mercator Math
// https://en.wikipedia.org/wiki/Web_Mercator

function coordinatesToGrid(lat, lon, zoom) {
   console.log("Input:      lat/lon [" + lat + "/" + lon + "]")
   lon = radians(lon); // lon is now bounded by [-PI; PI] in radians
   lat = radians(lat); // lat is now bounded by [-PI; PI] in radians

   var a = (128 / PI); // * pow(2, (zoom - 1));
   var b = tan(PI / 4 + lat / 2);
   var c = PI - log(b)

   var x = a * (lon + PI);
   var y = a * c;

   console.log("before map: [" + x + ", " + y + "]");

   x = map(x, 0, 256, 0, width);
   y = map(y, 0, 256, 0, height);


   console.log("after map:  [" + x + ", " + y + "]");
   console.log("----------------------------------------------");

   return createVector(x, y);
}

function setup() {
   createCanvas(ww, hh);
   image(mapimg, 0, 0);

   for (var i = 0; i < cities.length; i++) {
      var lat = cities[i][0];
      var lon = cities[i][1];
      var pos = coordinatesToGrid(lat, lon, zoom);
      noStroke();
      fill(0, 255, 0, 200);
      ellipse(pos.x, pos.y, 8, 8);
   }


   for (var i = 1; i < data.length; i++) {
      var stuff = data[i].split(/,/);
      //console.log(stuff[1], stuff[2]);
      var lat = Number(stuff[1]);
      var lon = Number(stuff[2]);
      var pos = coordinatesToGrid(lat, lon, zoom);
      noStroke();
      fill(255, 0, 0, 200);
      ellipse(pos.x, pos.y, 4, 4);
   }
}

extract from mapbox API doc:

Tiles and static images returned from this API will be one zoom level offset from tiles and static images returned from the Static (Classic) API. This is due to the size of the individual tiles being created -- this API creates 512px by 512px tiles and the Static Classic API creates 256px by 256px tiles. The offset was introduced to keep zoom level 0 the lowest zoom (one tile for the whole world).