@@ -0,0 +1,83 @@
// 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 = 900 ;
var hh = 900 ;
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 ) {
lon = radians ( lon ) ;
var w = 256 ; //width / 2;
var a = ( w / PI ) * pow ( 2 , zoom ) ;
var b = ( lon + PI ) ;
return a * b ;
}
function webMercY ( lat , zoom ) {
lat = radians ( lat ) ;
var w = 256 ; //height / 2;
var a = ( w / PI ) * pow ( 2 , zoom ) ;
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 ) ;
//37.7749° N, 122.4194° W
var lat = 40.7128 ;
var lon = - 74.0059 ;
var x = webMercX ( lon , zoom ) - cx ;
var y = webMercY ( lat , zoom ) - cy ;
noStroke ( ) ;
fill ( 255 , 0 , 0 , 200 ) ;
ellipse ( x , y , 32 , 32 ) ;
fill ( 255 , 0 , 0 , 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 ) ;
}
}