Why is my graphic not showing up on my p5js project w/ Mapbox API

Question

I'm trying to visualize data by mapping the latitude, longitude, and magnitude of some major Chicago neighborhoods with p5.js. It's inspired by this coding challenge. I followed it thoroughly, only changed the area and zoom of the map (using Mapbox API). The codes look right, and the map shows up. But when I try to visualize just one single location as a circle on the map before even inputting the data, it doesn't show up on the sketch. Super grateful if anyone can let me know what might be the problem here!

var mapimg;
var zoom = 10;
var clat = 0;
var clon = 0;
var lat = 41.9000;
var lon = -87.7204;


function preload() {
  mapimg = loadImage ('https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-87.7278,41.9099,10,0/400x400?access_token=pk.eyJ1Ijoic2wzMDcyNCIsImEiOiJja3VuMWNieWgzd3MzMnVrNmU2bzNwdndoIn0.cGgvcAgQwVdnNsHLIeBf9A');
}

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

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


function setup() {

  createCanvas(400, 400);
  translate(width/2, height/2);
  imageMode(CENTER);
  image(mapimg, 0, 0);
  stroke(255);
  strokeWeight(100);
  noFill();
  circle(0, 0, 500);

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

user_229247 · Answer

I think the issue has to do with mercX and mercY and the inputs you are passing to them. It looks like maybe they are designed to convert latitude and longitude into pixels.

You were using 0 for both clat and clon which would mean that the map was centered on the equator at the prime meridian. So the relative pixel coordinates between there and Chicago were huge. I think I've corrected the code by using values for clat and clon from your mapbox URL. However, I find the implementations of mercX and mercY to be somewhat incomprehensible, and I'm not sure what you are trying to highlight, so I cannot be sure. But at least x and y are on screen now (shown with a red point).

var mapimg;
var zoom = 10;
var clat = 41.9099;
var clon = -87.7278;
var lat = 41.9000;
var lon = -87.7204;


function preload() {
  mapimg = loadImage ('https://api.mapbox.com/styles/v1/mapbox/dark-v10/static/-87.7278,41.9099,10,0/400x400?access_token=pk.eyJ1Ijoic2wzMDcyNCIsImEiOiJja3VuMWNieWgzd3MzMnVrNmU2bzNwdndoIn0.cGgvcAgQwVdnNsHLIeBf9A');
}

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

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

function setup() {
  createCanvas(400, 400);
  translate(width/2, height/2);
  imageMode(CENTER);
  image(mapimg, 0, 0);
  stroke(255);
  strokeWeight(100);
  noFill();
  circle(0, 0, 500);

  // get the center of the image in pixels
  var cx = mercX(clon);
  var cy = mercY(clat);
  // convert lon & lat to pixels and find the relative displacement from the center
  var x = mercX(lon) - cx;
  var y = mercY(lat) - cy;
  
  print({ cx, cy, x, y });
  
  stroke('red');
  strokeWeight(8);
  point(x, y);
}

Why is my graphic not showing up on my p5js project w/ Mapbox API

1 Answers