Skip to content

Instantly share code, notes, and snippets.

@RobinHerbots

RobinHerbots/index.html

Forked from JustinK/index.html
Created June 14, 2024 15:16
Show Gist options
  • Save RobinHerbots/b0c26321828f6b0ae4cb77281798c77b to your computer and use it in GitHub Desktop.
Save RobinHerbots/b0c26321828f6b0ae4cb77281798c77b to your computer and use it in GitHub Desktop.
Download ZIP
MapMyRun API Demo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- This is where we are going to put the graph -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- This is where we are going to put the map -->
<div id="map-canvas" style="height: 500px; margin: 0 auto; padding: 0;"></div>
</div>
</div>
</div>
<!-- Call the Google Maps JavaScript API using your API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="running_data.js"></script>
</body>
</html>
Raw
running_data.js
$(function () {
var position = data.time_series.position;
//the position data needs to be tweaked a little to use with highcharts...
//basically the data needs to be reformatted from [[a,{b,c,d}],[a,{b,c,d}]] to [[a,d],[a,d]]
var elevationArray = [];
$.each(position, function() {
elevationArray.push(new Array(this[0], this[1].elevation));
});
//for the map, the position data needs to be converted to an array of google map points
var runningPathCoordinates = [];
$.each(position, function() {
runningPathCoordinates.push(new google.maps.LatLng(this[1].lat, this[1].lng));
});
//this method creates the map and plots the position coordinates
function initializeMap() {
//here we set the map options
var mapOptions = {
//zoomed all the way in
zoom: 15,
//center the map on some coordinates pulled from the postion data
center: new google.maps.LatLng(33.390017024, -86.7248872439),
//set the map type
mapTypeId: google.maps.MapTypeId.TERRAIN
};
//create the map
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
//draw the running path
var runningPath = new google.maps.Polyline({
//pass in the arra of coordinates created above
path: runningPathCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
//add the running path to the map
runningPath.setMap(map);
}
//create the map once the page is loaded
google.maps.event.addDomListener(window, 'load', initializeMap);
//initialize the highcharts graph
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Speed'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
//define formatting for the x axis
xAxis: {
type:'datetime',
minPadding: 0.05,
maxPadding: 0.05,
min: 0,
dateTimeLabelFormats: {
day: '%M:%S'
},
title: {
text: 'Elapsed Time (ms)'
}
},
//define formatting for the y axis
yAxis: [{
title: {
text: 'Speed (m/s)'
},
min: 0
},
{
gridLineWidth: 0,
title: {
text: 'Elevation (m)'
},
min: 0,
opposite:true
}],
legend: {
enabled: true
},
//pass in the data sets
series: [{
type: 'spline',
name: 'speed',
yAxis: 0,
pointStart: 0,
data: data.time_series.speed
},
{
type: 'spline',
name: 'elevation',
yAxis: 1,
pointStart: 0,
data: elevationArray
}]
});
});
//this is the raw data pasted directly from the API
var data = {
"start_datetime": "2014-10-06T22:32:35+00:00",
"name": "Ran 3.39 mi on 10\/6\/14",
"updated_datetime": "2014-10-06T23:03:07+00:00",
"created_datetime": "2014-10-06T23:03:07+00:00",
"notes": "",
"time_series": {
"position": [
[1.14092425, {
"lat": 33.389053708,
"lng": -86.7298983783,
"elevation": 156.62
}],
[1.2218575833, {
"lat": 33.3890589041,
"lng": -86.7299213197,
"elevation": 156.7
}],
//SNIP
//...
[1822.287538, {
"lat": 33.390650422,
"lng": -86.7248309425,
"elevation": 158.27
}]
],
"speed": [
[1.14092425, 0.0],
[1.2218575833, 2.2833796919],
//SNIP
//...
[1822.287538, 3.8601047625]
],
"distance": [
[1.14092425, 0.0],
[1.2218575833, 2.2093817552],
//SNIP
//...
[1822.287538, 5465.6629414324]
]
},
"start_locale_timezone": "America\/Chicago",
"source": "MapMyRun+ iPhone",
"_links": {
"privacy": [{
"href": "\/v7.0\/privacy_option\/0\/",
"id": "0"
}],
"self": [{
"href": "\/v7.0\/workout\/757447819\/?field_set=time_series",
"id": "757447819"
}],
"documentation": [{
"href": "https:\/\/www.mapmyapi.com\/docs\/Workout"
}],
"route": [{
"href": "\/v7.0\/route\/553332772\/",
"id": "553332772"
}],
"activity_type": [{
"href": "\/v7.0\/activity_type\/16\/",
"id": "16"
}]
},
"reference_key": "668752945",
"has_time_series": true,
"is_verified": true,
"aggregates": {
"active_time_total": 1823.0,
"distance_total": 5457.33378432,
"speed_max": 5.437481632,
"speed_avg": 2.9932054944,
"elapsed_time_total": 1825.0,
"metabolic_energy_total": 2284464.0
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment