Created
May 14, 2015 20:18
-
-
Save dashalom/79875aeef72882dac77b 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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Info Window</title> | |
<link rel="stylesheet" href="style.css"> | |
<link href="http://fonts.googleapis.com/css?family=Merriweather:700" rel="stylesheet" type="text/css"> | |
<!--Load jquery:--> | |
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> | |
<!--START--> | |
</head> | |
<body> | |
</body> | |
<div class="infowin"> | |
<div class="city" id="step">Rome</div> | |
<hr> | |
<div class="basic"> Date erected: <l id="yearErected">1527</l> </div> | |
<hr> | |
<div class="basic"> Station: <l id="station">3</l> </div> | |
<hr> | |
<div class="basic"> Years of travel thus far: <l id="totalYears"> 345</l> </div> | |
<hr> | |
<div class="basic"> Distance from previous location: <l id="dist">Caesar</l> </div> | |
<hr> | |
<div class="basic"> Commissioned by: <l id="commissionedBy">Caesar</l> </div> | |
<hr> | |
<div id="description"> Originally erected on the eastern flank of the Mausoleum of Augustus, paired with the Esquiline obelisk. Found in 1527. Erected by Pope Pius VI in 1786 on the Quirinal Hill next to statues of the Dioscuri (called the 'Horse Tamers') from the Baths of Constantine. </div> | |
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Obelisk_Central_Park.jpg/1024px-Obelisk_Central_Park.jpg" alt="Obelisk"> | |
<div class="caption"> Image of Obelisk in Rome </div> | |
<div class="buttons"> </div> | |
</div> | |
<script> | |
//make a variable that will hold the data once it's loaded: | |
var GeoPoint = function (lat, lon) { | |
this.lat = new Number(lat); | |
this.lon = new Number(lon); | |
}; | |
var GeoUtils = function () { | |
}; | |
GeoUtils.prototype.toRad = function (value) { | |
return value * Math.PI / 180; | |
}; | |
GeoUtils.prototype.distanceBetween = function (p1, p2) { | |
var R = 3958.7558657440545; // Radius of earth in Miles | |
var dLat = this.toRad(p2.lat - p1.lat); | |
var dLon = this.toRad(p2.lon - p1.lon); | |
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + | |
Math.cos(this.toRad(p1.lat)) * Math.cos(this.toRad(p2.lat)) * | |
Math.sin(dLon / 2) * Math.sin(dLon / 2); | |
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); | |
var d = R * c; | |
return { | |
miles: d, | |
km: d * 1.609344, | |
m: d * 1.609344 * 1000 | |
}; | |
}; | |
<!-- distance till here --> | |
var data; | |
var obid = 20; | |
var step = 1; | |
//use jquery to store the entire geojson file as an object called "data" | |
$.getJSON('https://gist.githubusercontent.com/Willjfield/443a3a9bf7cf3c6dcc20/raw/8da32743245500d73f568d7bb559fbd8cd449b8d/cleoneedles.geojson', function(geoJ) { | |
data = geoJ; | |
console.log(data); | |
//set the obelisk's id to 21 (this is the new york one), we can dynamically change this later but it might be easier while developing to work with one | |
var cityName; | |
var year; | |
var stop = step + 1; | |
var yrbuilt; | |
var sum; | |
var commissioned; | |
var distance; | |
//for each item in the data's "features" field | |
for (var i in data.features){ | |
//look through the feature's properties and see if the id matches the obid we set | |
if (data.features[i].properties.id == obid){ | |
cityName= data.features[i].properties.city[step]; | |
year= data.features[i].properties.year_aquired[step]; | |
yrbuilt= data.features[i].properties.year_aquired[0]; | |
sum= year-yrbuilt; | |
commissioned = data.features[i].properties.commission; | |
distance= GeoUtils.distanceBetween(data.features[i].geometry.coordinates[step], data.features[i].geometry.coordinates[step+1]); | |
/* | |
here is how you can look at all the properties for that obelisk, inside this if statement/for loop: | |
data.features[i].properties.origin - where the obelisk was built | |
data.features[i].properties.commission - who it was commissioned for | |
data.features[i].properties.height - height | |
data.features[i].properties.weight - weight | |
data.features[i].properties.city[step] - an array of each city the obelisk has been in, in chronological order. Obelisk 21 went from Heliopolis to Alexandria to New York so this property is an array that equals ['Heliopolis','Alexandria','New York'] | |
There are more properties that you can find if you look in the geojson. If you want to add more from the csv into the geojson, feel free! | |
*/ | |
//...look through each set of coordinates in that feature's geometry | |
for(var j in data.features[i].geometry.coordinates){ | |
//create an array called icoords | |
var icoords = []; | |
//put each number inside each coordinate into an array | |
icoords.push(data.features[i].geometry.coordinates[j][0]); | |
icoords.push(data.features[i].geometry.coordinates[j][1]); | |
//you now have a 2 item array with one of the positions for obelisk 21, you can use it to do whatever you want like create a circle or marker | |
} | |
} | |
} | |
$("#step").replaceWith("<div class='city' id='step'>"+cityName+"</div>"); | |
$("#yearErected").replaceWith("<l id='yearErected'>"+year+"</l>"); | |
$("#station").replaceWith("<l id='station'>"+stop+"</l>"); | |
$("#totalYears").replaceWith("<l id='totalYears'>"+sum+"</l>"); | |
$("#commissionedBy").replaceWith("<l id='commissionedBy'>"+commissioned+"</l>"); | |
$("#dist").replaceWith("<l id='dist'>"+distance+"</l>"); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment