Skip to content

Instantly share code, notes, and snippets.

@mapmeld
Created September 3, 2012 19:08
Show Gist options
  • Save mapmeld/3612500 to your computer and use it in GitHub Desktop.
Save mapmeld/3612500 to your computer and use it in GitHub Desktop.
GeoJSON in Khan Academy CS
// Put your GeoJSON at the beginning
// Here are some more countries and each US state: https://github.com/johan/world.geo.json/tree/master/countries
// scroll to the bottom to write your own program, add images by latitude and longitude, and more
// Questions? Tweet to @mapmeld
var geojson = {"type":"FeatureCollection","features":[
{"type":"Feature","properties":{"name":"United States of America"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-94.81758,49.38905],[-94.64,48.84],[-94.32914,48.67074],[-93.63087,48.60926],[-92.61,48.45],[-91.64,48.14],[-90.83,48.27],[-89.6,48.01],[-89.272917,48.019808],[-88.378114,48.302918],[-87.439793,47.94],[-86.461991,47.553338],[-85.652363,47.220219],[-84.87608,46.900083],[-84.779238,46.637102],[-84.543749,46.538684],[-84.6049,46.4396],[-84.3367,46.40877],[-84.14212,46.512226],[-84.091851,46.275419],[-83.890765,46.116927],[-83.616131,46.116927],[-83.469551,45.994686],[-83.592851,45.816894],[-82.550925,45.347517],[-82.337763,44.44],[-82.137642,43.571088],[-82.43,42.98],[-82.9,42.43],[-83.12,42.08],[-83.142,41.975681],[-83.02981,41.832796],[-82.690089,41.675105],[-82.439278,41.675105],[-81.277747,42.209026],[-80.247448,42.3662],[-78.939362,42.863611],[-78.92,42.965],[-79.01,43.27],[-79.171674,43.466339],[-78.72028,43.625089],[-77.737885,43.629056],[-76.820034,43.628784],[-76.5,44.018459],[-76.375,44.09631],[-75.31821,44.81645],[-74.867,45.00048],[-73.34783,45.00738],[-71.50506,45.0082],[-71.405,45.255],[-71.08482,45.30524],[-70.66,45.46],[-70.305,45.915],[-69.99997,46.69307],[-69.237216,47.447781],[-68.905,47.185],[-68.23444,47.35486],[-67.79046,47.06636],[-67.79134,45.70281],[-67.13741,45.13753],[-66.96466,44.8097],[-68.03252,44.3252],[-69.06,43.98],[-70.11617,43.68405],[-70.645476,43.090238],[-70.81489,42.8653],[-70.825,42.335],[-70.495,41.805],[-70.08,41.78],[-70.185,42.145],[-69.88497,41.92283],[-69.96503,41.63717],[-70.64,41.475],[-71.12039,41.49445],[-71.86,41.32],[-72.295,41.27],[-72.87643,41.22065],[-73.71,40.931102],[-72.24126,41.11948],[-71.945,40.93],[-73.345,40.63],[-73.982,40.628],[-73.952325,40.75075],[-74.25671,40.47351],[-73.96244,40.42763],[-74.17838,39.70926],[-74.90604,38.93954],[-74.98041,39.1964],[-75.20002,39.24845],[-75.52805,39.4985],[-75.32,38.96],[-75.071835,38.782032],[-75.05673,38.40412],[-75.37747,38.01551],[-75.94023,37.21689],[-76.03127,37.2566],[-75.72205,37.93705],[-76.23287,38.319215],[-76.35,39.15],[-76.542725,38.717615],[-76.32933,38.08326],[-76.989998,38.239992],[-76.30162,37.917945],[-76.25874,36.9664],[-75.9718,36.89726],[-75.86804,36.55125],[-75.72749,35.55074],[-76.36318,34.80854],[-77.397635,34.51201],[-78.05496,33.92547],[-78.55435,33.86133],[-79.06067,33.49395],[-79.20357,33.15839],[-80.301325,32.509355],[-80.86498,32.0333],[-81.33629,31.44049],[-81.49042,30.72999],[-81.31371,30.03552],[-80.98,29.18],[-80.535585,28.47213],[-80.53,28.04],[-80.056539,26.88],[-80.088015,26.205765],[-80.13156,25.816775],[-80.38103,25.20616],[-80.68,25.08],[-81.17213,25.20126],[-81.33,25.64],[-81.71,25.87],[-82.24,26.73],[-82.70515,27.49504],[-82.85526,27.88624],[-82.65,28.55],[-82.93,29.1],[-83.70959,29.93656],[-84.1,30.09],[-85.10882,29.63615],[-85.28784,29.68612],[-85.7731,30.15261],[-86.4,30.4],[-87.53036,30.27433],[-88.41782,30.3849],[-89.18049,30.31598],[-89.593831,30.159994],[-89.413735,29.89419],[-89.43,29.48864],[-89.21767,29.29108],[-89.40823,29.15961],[-89.77928,29.30714],[-90.15463,29.11743],[-90.880225,29.148535],[-91.626785,29.677],[-92.49906,29.5523],[-93.22637,29.78375],[-93.84842,29.71363],[-94.69,29.48],[-95.60026,28.73863],[-96.59404,28.30748],[-97.14,27.83],[-97.37,27.38],[-97.38,26.69],[-97.33,26.21],[-97.14,25.87],[-97.53,25.84],[-98.24,26.06],[-99.02,26.37],[-99.3,26.84],[-99.52,27.54],[-100.11,28.11],[-100.45584,28.69612],[-100.9576,29.38071],[-101.6624,29.7793],[-102.48,29.76],[-103.11,28.97],[-103.94,29.27],[-104.45697,29.57196],[-104.70575,30.12173],[-105.03737,30.64402],[-105.63159,31.08383],[-106.1429,31.39995],[-106.50759,31.75452],[-108.24,31.754854],[-108.24194,31.34222],[-109.035,31.34194],[-111.02361,31.33472],[-113.30498,32.03914],[-114.815,32.52528],[-114.72139,32.72083],[-115.99135,32.61239],[-117.12776,32.53534],[-117.295938,33.046225],[-117.944,33.621236],[-118.410602,33.740909],[-118.519895,34.027782],[-119.081,34.078],[-119.438841,34.348477],[-120.36778,34.44711],[-120.62286,34.60855],[-120.74433,35.15686],[-121.71457,36.16153],[-122.54747,37.55176],[-122.51201,37.78339],[-122.95319,38.11371],[-123.7272,38.95166],[-123.86517,39.76699],[-124.39807,40.3132],[-124.17886,41.14202],[-124.2137,41.99964],[-124.53284,42.76599],[-124.14214,43.70838],[-124.020535,44.615895],[-123.89893,45.52341],[-124.079635,46.86475],[-124.39567,47.72017],[-124.68721,48.184433],[-124.566101,48.379715],[-123.12,48.04],[-122.58736,47.096],[-122.34,47.36],[-122.5,48.18],[-122.84,49],[-120,49],[-117.03121,49],[-116.04818,49],[-113,49],[-110.05,49],[-107.05,49],[-104.04826,48.99986],[-100.65,49],[-97.22872,49.0007],[-95.15907,49],[-95.15609,49.38425],[-94.81758,49.38905]]]]},"id":"USA"}
]};
// reader starts here
fill(0, 0, 0);
// scale map to fit it on the page
var minlat = 10000;
var maxlat = -10000;
var minlng = 10000;
var maxlng = -10000;
for(var f=0;f<geojson.features.length;f++){
if(geojson.features[f].geometry.type === "MultiPolygon"){
for(var part=0;part<geojson.features[f].geometry.coordinates.length;part++){
var coordinates=geojson.features[f].geometry.coordinates[part][0];
for(var pt=0;pt<coordinates.length;pt++){
minlat = min(minlat, coordinates[pt][1]);
maxlat = max(maxlat, coordinates[pt][1]);
minlng = min(minlng, coordinates[pt][0]);
maxlng = max(maxlng, coordinates[pt][0]);
}
}
}
else if(geojson.features[f].geometry.type === "Polygon"){
var coordinates=geojson.features[f].geometry.coordinates[0];
for(var pt=0;pt<coordinates.length;pt++){
minlat = min(minlat, coordinates[pt][1]);
maxlat = max(maxlat, coordinates[pt][1]);
minlng = min(minlng, coordinates[pt][0]);
maxlng = max(maxlng, coordinates[pt][0]);
}
}
}
// center map on page
var yoffset = 385;
var xoffset = 15;
if((maxlat - minlat) < (maxlng - minlng)){
yoffset = 385 - (1 - (maxlat - minlat) / (maxlng - minlng)) * 192.5;
}
else{
xoffset = 15 + (1 - (maxlng - minlng) / (maxlat - minlat)) * 192.5;
}
var lat_to_y = function(latitude){
return yoffset - (latitude - minlat) / max((maxlat - minlat), (maxlng - minlng)) * 370;
};
var lng_to_x = function(longitude){
return (longitude - minlng) / max((maxlat - minlat), (maxlng - minlng)) * 370 + xoffset;
};
// connect the coordinates with lines
for(var f=0;f<geojson.features.length;f++){
if(geojson.features[f].geometry.type === "MultiPolygon"){
for(var part=0;part<geojson.features[f].geometry.coordinates.length;part++){
var coordinates=geojson.features[f].geometry.coordinates[part][0];
for(var pt=0;pt<coordinates.length-1;pt++){
line(
lng_to_x( coordinates[pt][0] ),
lat_to_y( coordinates[pt][1] ),
lng_to_x( coordinates[pt+1][0] ),
lat_to_y( coordinates[pt+1][1] )
);
}
}
}
else if(geojson.features[f].geometry.type === "Polygon"){
var coordinates=geojson.features[f].geometry.coordinates[0];
for(var pt=0;pt<coordinates.length-1;pt++){
line(
lng_to_x( coordinates[pt][0] ),
lat_to_y( coordinates[pt][1] ),
lng_to_x( coordinates[pt+1][0] ),
lat_to_y( coordinates[pt+1][1] )
);
}
}
}
// connect start and end points
line(
lng_to_x( coordinates[0][0] ),
lat_to_y( coordinates[0][1] ),
lng_to_x( coordinates[coordinates.length-1][0] ),
lat_to_y( coordinates[coordinates.length-1][1] )
);
var star = getImage("cute/Star");
var MapStar = function(lat, lng){
image(star, lng_to_x(lng) - 10, lat_to_y(lat) - 20, 20, 40);
};
var MapImage = function(myimage, lat, lng){
image(myimage, lng_to_x(lng) - 10, lat_to_y(lat) - 10, 20, 20);
};
var MapImageSize = function(myimage, lat, lng, width, height){
image(myimage, lng_to_x(lng) - width / 2, lat_to_y(lat) - height / 2, width, height);
};
// your code goes here
// Add a star using latitude and longitude!
MapStar(37.26, -121);
// Add any Khan Academy image as a marker!
var heart = getImage("space/healthheart");
MapImage(heart, 32.8, -83.8);
// Set the size of the image (keeps image centered on your point)
var gem = getImage("cute/GemBlue");
MapImageSize(gem, 43.7, -72.7, 20, 30);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment