-
-
Save hyojjxipitug/f93d9a0bf9307576e94a4733d9c619f8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
extract from mapbox API doc: