Skip to content

Instantly share code, notes, and snippets.

@mutley
Created June 20, 2012 15:50
Show Gist options
  • Save mutley/2960599 to your computer and use it in GitHub Desktop.
Save mutley/2960599 to your computer and use it in GitHub Desktop.
Javascript from HELL!!! (probably the most beautiful code we have produced)
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