maptastik/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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?


## 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
	});
});

## 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>

## runs.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              runs.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <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
	});
	});
	<!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>