Mapbox test

mapbox_test.js

var mapimg;
var bounds;


function setup() {
  createCanvas(800, 600);
  angleMode(RADIANS);
  var size = [800, 600];
  //var center = [2.3522, 48.8566];
  var center = [2.3522, 48.8566];
  var zoom = 4;
  bounds = geoViewport.bounds(center, zoom, size);
  // -west, -south, +east, +north order.

  console.log(bounds);
  for (var i = 0; i < bounds.length; i++) {
    bounds[i] = radians(bounds[i]);
  }

  var imgurl = 'https://api.mapbox.com/styles/v1/shiffman/ciwnzqxww005e2qnxepqmkax3/static/' +
    center.join(',') + ',' +
    zoom + '/' +
    size.join('x') +
    '?access_token=' + 'pk.eyJ1Ijoic2hpZmZtYW4iLCJhIjoiQmpHeUpfWSJ9.oeJv73FjnroBxI1GQ3bU_Q';

  mapimg = createImg(imgurl, ready);

}

function mercatorY(lat) {
  lat = radians(lat);
  return log(tan((PI/4.0) + (lat/2.0)));
}


function ready() {
  mapimg.hide();

  background(0);
  image(mapimg, 0, 0);

  var mx = radians(2.3522);
  var my = mercatorY(48.8566);

  console.log(bounds);
  console.log(mx,my);
  var x = map(mx, bounds[0], bounds[2], 0, width);
  var y = map(my, bounds[1], bounds[3], 0, height);
  console.log(x,y);

  fill(0,0,255);
  ellipse(x, y, 16, 16);

  var mx = radians(2.3522);
  var my = radians(48.8566);

  console.log(bounds);
  console.log(mx,my);
  var x = map(mx, bounds[0], bounds[2], 0, width);
  var y = map(my, bounds[1], bounds[3], 0, height);
  console.log(x,y);

  fill(0,255,0);
  ellipse(x, y, 16, 16);

}

lol wrong code