Mapping earthquake data over a dynamic image using Mapbox in Javascript

wcfcarolina13

[edit] -I did manage to get this to work. Working code is at the very bottom. I have a new question: Can anyone point me to some resources that will help me learn how to do this coding challenge with a dynamic map? Example, a map in which I can zoom in and the data will remain in the correct coordinates, the circles will change their size dynamically so that the map is still easier to see, etc? Even better, is there a way to have the earthquake data update regularly or receive a tooltip with earthquake info when I scroll over the ellipses? I know this is way too much, that's why I'm asking for resources, not the actual result :) I'll figure out the rest in pieces. [edit]

original question:

I'm throwing in the towel again, this one has me stumped. I've essentially copied Shiffman's code verbatim but it appears that the url to retrieve a static map doesn't work anymore. You'll notice I'm on part one, before he integrates the earthquake data, so I'm still attempting to get the image to size correctly and to have a single set of coordinates appear in the right location on the canvas. I tried using an updated style and that one is functional and I was even able to get the ellipses to appear and change according to the latitude and longitude...but they never appear in the correct place. Here's my code, it may be hacked up due to all of my experimenting:

var mapimg;

var clat = 0;
var clon = 0;

var lat = 49.2827;
var lon = -123.1207;

function preload() {
    mapimg = loadImage('https://"+"api.mapbox.com/v4/mapbox.dark/0, 0,1/1024x512.png?access_token=KEY');

}

var zoom = 1;

// When I change the zoom variables as well as the corresponding property in the link, weird things happen. Through trial and error I fixed it on the static map in the working code

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(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;

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

}

One of the things you'll notice is that this map loops, so when zoomed out you can see two maps! I haven't figured out if this is the way the image works or if that's to do with the way I've formatted the link. I'll be honest, I am still working out how all of the parameters and equations work. The documentation is overwhelming for me.

Link to Shiffman's video and related github files:

https://github.com/CodingTrain/Rainbow-Code/blob/b22fb09f6eb3e403c3efff370dab42c104a33d35/CodingChallenges/CC_57_Earthquake_Viz/sketch.js

Link to Mapbox API documentation:

https://www.mapbox.com/api-documentation/?language=JavaScript#introduction

Thanks for looking it over!

[edit] - Here's the working code. I solved the problem. My new request is at the top of this thread :)

var mapimg;

var clat = 0;
var clon = 0;

var lat = 49.2827;
var lon = -123.1207;

var earthquakes;

function preload() {
    mapimg = loadImage('https://" + "api.mapbox.com/v4/mapbox.dark/ 0,0,2,1/1024x512.png?access_token=KEY');

    earthquakes = loadStrings('http://" + "earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv');

    // earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.csv

}

var zoom = 1;

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(1024, 512);
    translate(width / 2, height / 2);
    imageMode(CENTER);
    image(mapimg, 0, 0);

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

    for (var i = 1; i < earthquakes.length; i++) {
        var data = earthquakes[i].split(/,/);
        console.log(data);
        var lat = data[1];
        var lon = data[2];
        var mag = data[4];
        var x = mercX(lon) - cx;
        var y = mercY(lat) - cy;

        mag = pow(10, mag);
        mag = sqrt(mag);

        var magmax = sqrt(pow(10, 10));

        var d = map(mag, 0, magmax, 0, 180);
        stroke(255, 0, 255);
        fill(255, 0, 255, 200);
        ellipse(x, y, d, d);
    }
}