Runkeeper Runs by maptastik

My runs in Lexington as logged by RunKeeper. GPX files of individual runs were downloaded from RunKeeper and tracks were consolidated into a single GPX file using GPS Babel. I converted the combined GPX file into GeoJSON using OGR2OGR via QGIS 2.8.1. I used MapboxJS to pull in CartoDB’s Dark Matter tiles and to generally just set up the map. Finally, I used jQuery to pull in the runs.geojson.

Next steps include:

Add a class to each path (using D3js?)
Use that class and CSS to mess with the opacity blending on the paths (mix-blend-mode perhaps?)
Maybe do this with Mapsense…It’d just be nice to be able to use CSS a little more naturally
Also, let’s add some title text with cool neoness!
It might also be cool to buffer the paths, dissolve into a single polygon and toss that through TileLayer.boundaryCanvas
And maybe it would be cool to do it with AGOL
Or better yet, Esri Leaflet
And then maybe mapbox-gl-js!
And google maps, why not?

index.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LexingRuns - Dec 2013 - July 11,2015</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		#map {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 100%;
		}
	</style>
</head>
<body>
	<div id="map"></div>
	<script src='app.js'></script>
</body>
</html>

app.js

L.mapbox.accessToken = 'pk.eyJ1IjoibWFwdGFzdGlrIiwiYSI6IjNPMkREV1kifQ.2KGPFZD0QaGfvYzXYotTXQ';
var map = L.map('map').setView([38.046441, -84.497019], 16);

var base = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
}).addTo(map);

var runsLayer;

$.getJSON('runs.geojson', function(data) {
	runsLayer = L.mapbox.featureLayer(data);
	runsLayer.addTo(map);
	runsLayer.setStyle({
		color: '#f7ff00',
		opacity: 0.06,
		weight: 4
	});
});