Created
June 20, 2012 15:50
-
-
Save mutley/2960599 to your computer and use it in GitHub Desktop.
Javascript from HELL!!! (probably the most beautiful code we have produced)
This file contains hidden or 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
var map; | |
var chart; | |
var infowindow = new google.maps.InfoWindow(); | |
var polyline; | |
var myParser; | |
var dataElevations; | |
var data; | |
var distance; | |
var mousemarker = null; | |
$.getJSON('https://dl.dropbox.com/u/26209821/stage_1.json', {}, function(data, status) { plotElevation(data); dataElevations = data}); | |
// Load the Visualization API and the columnchart package. | |
google.load("visualization", "1", {packages: ["columnchart"]}); | |
function initialize() { | |
var myOptions = { | |
zoom: 11, | |
mapTypeId: 'terrain' | |
} | |
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); | |
// Create geoxml parser | |
myParser = new geoXML3.parser({map: map, processStyles: true}); | |
myParser.parse('https://dl.dropbox.com/u/26209821/stage_1.kml'); | |
} | |
// Takes an array of ElevationResult objects and plots the elevation profile on a Visualization API ColumnChart. | |
function plotElevation(results) { | |
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart')); | |
google.visualization.events.addListener(chart, 'onmouseover', function(e) { | |
erowe = dataElevations[e.row].location | |
elLocation = new google.maps.LatLng(erowe.ab, erowe.cb) | |
if (mousemarker == null) { | |
mousemarker = new google.maps.Marker({ | |
position: elLocation, | |
map: map, | |
icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png" | |
}); | |
} else { | |
mousemarker.setPosition(elLocation); | |
} | |
}); | |
// Extract the data from which to populate the chart. | |
// Because the samples are equidistant, the 'Sample' | |
// column here does double duty as distance along the | |
// X axis. | |
data = new google.visualization.DataTable(); | |
data.addColumn('string', 'Sample'); | |
data.addColumn('number', 'Elevation'); | |
for (var i = 0; i < results.length; i++ ) { | |
x = 131.6 / results.length | |
data.addRow([(Math.round(x*i)).toString(), results[i].elevation * 3.2808399]); | |
} | |
// Draw the chart using the data within its DIV. | |
document.getElementById('elevation_chart').style.display = 'block'; | |
chart.draw(data, { | |
width: 677, | |
height: 200, | |
title: 'Stage Elevation Profile', | |
legend: 'none', | |
titleY: 'Elevation (ft)', | |
titleX: 'Distance (mi.)', | |
focusBorderColor: '#00ff00' | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment