earthquake.js

  // https://api.mapbox.com/styles/v1/mapbox/streets-v8/static/0,0,2/600x600?access_token=pk.eyJ1IjoiY29kaW5ndHJhaW4iLCJhIjoiY2l6MDJ0Mjk5MDQ1dzJ3bzRiM29zaW16ayJ9.guiqnHMGUq196Zxa1d3UPg
//37.7749° N, 122.4194° W
//40.7832382,-73.9677707
//50.7198845,21.9047853
//35.0060799,135.6909095  QUIOTO
//55.7438434,37.6137196 MOSCOW
//-15.7864572,-47.9046954 BRASILIA
//39.9780444,116.38798 PEQUIM
//40.3682899,-3.6572655 MADRI
//14.9750654,-23.5886834 CABO VERDE

/*
The problem lies on the zoom thing, it seems that the 2 to the power of zoom "pow(2, zoom)" is not showing it right
when testing, for zoom = 1, for me it worked using "pow(2, zoom - 1)", and for zoom = 2, "pow(2, zoom - 1.3)"
as "pow(2, zoom - v)", v is proportional to zoom, for zoom >= 2, v is the same, for me it worked it being 1.3.
why 1.3? Only Odin knows. Hahahhahahaha
I was wondering if the raw data is on the "true" Ellipsoid Mercator. Or maybe there is some scale thing going on
between the map image from the mapbox and the raw data...
Or maybe not. hauhauahuaha

artur31415926@gmail.com
https://www.youtube.com/channel/UC6blOB30re0J-Oiksqaob1g
https://www.instagram.com/artur31415/

*/

var lats = [40.7832382, 50.7198845, 35.0060799, 55.7438434, -15.7864572, 39.9780444, 40.3682899, 14.9750654];
var lons = [-73.9677707, 21.9047853, 135.6909095, 37.6137196, -47.9046954, 116.38798, -3.6572655, -23.5886834];


var mapimg;
var zoom = 2;
var v = 1.3;
var data;
var ww = 1280;
var hh = 1280;
var clat = 0; //37.7749;
var clon = 0; //-122.4194;



function preload()
{
  mapimg = loadImage('https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/' + clon + ',' + clat + ',' + zoom + '/' + ww + 'x' + hh + '?access_token=pk.eyJ1IjoiY29kaW5ndHJhaW4iLCJhIjoiY2l6MDJ0Mjk5MDQ1dzJ3bzRiM29zaW16ayJ9.guiqnHMGUq196Zxa1d3UPg');
    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 mercX(lon)
{
  lon = radians(lon);
  return (256 / PI) * pow(2, zoom) * (lon + PI);
}

function mercY(lat)
{
  lat = radians(lat);
  return (256 / PI) * pow(2, zoom) * (PI - log(tan((PI / 4.0) + (lat / 2.0))));
}

function webMercX(lon, zoom) {
  var _lon = radians(lon);
  var w = width / 2;
  var a = (w / PI);
  var p = pow(2, zoom - 1);
  if(zoom > 1)
    p = pow(2, zoom - v);

  a *= p;
  var b = (_lon + PI);
  return a * b;
}

function webMercY(lat, zoom) {
  var _lat = radians(lat);
  var w = height / 2;
  var a = (w / PI);
  var p = pow(2, zoom - 1);
  if(zoom > 1)
    p = pow(2, zoom - v);

  a *= p;

  var c = tan(PI / 4 + _lat / 2);
  var b = PI - log(c)
  return a * b;
}


function setup()
{
  createCanvas(ww, hh);
  angleMode(RADIANS);
  translate(width / 2, height / 2);
  imageMode(CENTER);
  image(mapimg, 0, 0);

  var cx = webMercX(clon, zoom);
  var cy = webMercY(clat, zoom);




  for(var i = 0; i < lats.length; ++i)
  {
    var x = webMercX(lons[i], zoom)- cx;
    var y = webMercY(lats[i], zoom) - cy;
    console.log("x = " + x + "; y = " + y);
    noStroke();
    fill(0, 255, 0, 200);
    ellipse(x, y, 32, 32);
  }



  noStroke();
  fill(0, 0, 255, 200);
  ellipse(cx - cx, cy - cy, 32, 32);


  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 x = webMercX(lon, zoom) - cx;
    var y = webMercY(lat, zoom) - cy;
    noStroke();
    fill(255, 0, 0, 200);
    ellipse(x, y, 4, 4);
  }
}

I found this in the mapbox API documentation:

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).