lemwerks · March 25, 2020 21:52
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
 	<meta charset="utf-8" />
 	<title>Under Armour Runs + Rides Heatmaps</title>
 	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
 	<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
 	<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
 	<style>
 		body {
 			margin: 0;
 			padding: 0;
 		}
 	</style>
 </head>

 <body>
 	<style>
 		#map {
 			position: absolute;
 			top: 0;
 			bottom: 0;
 			width: 100%;
 		}

 		#menu {
 			background: #fff;
 			position: absolute;
 			z-index: 1;
 			top: 50px;
 			right: 10px;
 			border-radius: 3px;
 			width: 120px;
 			border: 1px solid rgba(0, 0, 0, 0.4);
 			font-family: 'Open Sans', sans-serif;
 		}

 		#menu a {
 			font-size: 13px;
 			color: #404040;
 			display: block;
 			margin: 0;
 			padding: 0;
 			padding: 10px;
 			text-decoration: none;
 			border-bottom: 1px solid rgba(0, 0, 0, 0.25);
 			text-align: center;
 		}

 		#menu a:last-child {
 			border: none;
 		}

 		#menu a:hover {
 			background-color: #f8f8f8;
 			color: #404040;
 		}

 		#menu a.active {
 			background-color: #3887be;
 			color: #ffffff;
 		}

 		#menu a.active:hover {
 			background: #3074a4;
 		}
 	</style>

 	<nav id="menu"></nav>
 	<div id="map"></div>

 	<script>
 		mapboxgl.accessToken = 'pk.eyJ1IjoibGVtd2Vya3MiLCJhIjoiY2s4N3YwZHQwMDF6MjNuczAzdDgyemc0ZCJ9.PtNovNzKXdkVAQqijxV1oQ';
 		// Set bounds to Austin, TX
 		var bounds = [
 			[-98.0261770004211, 30.0678640288457], // Southwest coordinates
 			[-97.5416001207618, 30.5194859159522] // Northeast coordinates
 		];

 		// Instantiate the map, Set Zoom, Center and Style
 		var map = new mapboxgl.Map({
 			container: 'map',
 			style: 'mapbox://styles/lemwerks/ck80hzsy104nv1inv2cgu7y9r?fresh=true',
 			zoom: 12,
 			center: [-97.7431, 30.2672],
 			minZoom: 10,
 			maxZoom: 15.5,
 			maxBounds: bounds,
 			hash: true
 		});

 		// Set Toggles and Names

 		var toggleableLayerIds = ['austin-runs', 'austin-rides'];

 		var displayNameLookupTable = {
 			"austin-runs": "RUNS",
 			"austin-rides": "BIKE RIDES"
 		}
 		for (var i = 0; i < toggleableLayerIds.length; i++) {
 			var id = toggleableLayerIds[i];
 			var link = document.createElement('a');
 			link.href = '#';
 			link.className = 'active';
 			link.textContent = displayNameLookupTable[id];
 			link.id = id;
 			link.onclick = function(e) {
 				var clickedLayer = this.id;
 				e.preventDefault();
 				e.stopPropagation();
 				var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
 				if (visibility === 'visible') {
 					map.setLayoutProperty(clickedLayer, 'visibility', 'none');
 					this.className = '';
 				} else {
 					this.className = 'active';
 					map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
 				}
 			};
 			var layers = document.getElementById('menu');
 			layers.appendChild(link);
 		}

 		// // Add geolocate control to the map.
 		// map.addControl(
 		// 	new mapboxgl.GeolocateControl({
 		// 		positionOptions: {
 		// 			enableHighAccuracy: true
 		// 		},
 		// 		trackUserLocation: true
 		// 	})
 		// );
 	</script>

 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Under Armour Runs + Rides Heatmaps</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>

	<body>
	<style>
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	#menu {
	background: #fff;
	position: absolute;
	z-index: 1;
	top: 50px;
	right: 10px;
	border-radius: 3px;
	width: 120px;
	border: 1px solid rgba(0, 0, 0, 0.4);
	font-family: 'Open Sans', sans-serif;
	}

	#menu a {
	font-size: 13px;
	color: #404040;
	display: block;
	margin: 0;
	padding: 0;
	padding: 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.25);
	text-align: center;
	}

	#menu a:last-child {
	border: none;
	}

	#menu a:hover {
	background-color: #f8f8f8;
	color: #404040;
	}

	#menu a.active {
	background-color: #3887be;
	color: #ffffff;
	}

	#menu a.active:hover {
	background: #3074a4;
	}
	</style>

	<nav id="menu"></nav>
	<div id="map"></div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibGVtd2Vya3MiLCJhIjoiY2s4N3YwZHQwMDF6MjNuczAzdDgyemc0ZCJ9.PtNovNzKXdkVAQqijxV1oQ';
	// Set bounds to Austin, TX
	var bounds = [
	[-98.0261770004211, 30.0678640288457], // Southwest coordinates
	[-97.5416001207618, 30.5194859159522] // Northeast coordinates
	];

	// Instantiate the map, Set Zoom, Center and Style
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/lemwerks/ck80hzsy104nv1inv2cgu7y9r?fresh=true',
	zoom: 12,
	center: [-97.7431, 30.2672],
	minZoom: 10,
	maxZoom: 15.5,
	maxBounds: bounds,
	hash: true
	});

	// Set Toggles and Names

	var toggleableLayerIds = ['austin-runs', 'austin-rides'];

	var displayNameLookupTable = {
	"austin-runs": "RUNS",
	"austin-rides": "BIKE RIDES"
	}
	for (var i = 0; i < toggleableLayerIds.length; i++) {
	var id = toggleableLayerIds[i];
	var link = document.createElement('a');
	link.href = '#';
	link.className = 'active';
	link.textContent = displayNameLookupTable[id];
	link.id = id;
	link.onclick = function(e) {
	var clickedLayer = this.id;
	e.preventDefault();
	e.stopPropagation();
	var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
	if (visibility === 'visible') {
	map.setLayoutProperty(clickedLayer, 'visibility', 'none');
	this.className = '';
	} else {
	this.className = 'active';
	map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
	}
	};
	var layers = document.getElementById('menu');
	layers.appendChild(link);
	}

	// // Add geolocate control to the map.
	// map.addControl(
	// new mapboxgl.GeolocateControl({
	// positionOptions: {
	// enableHighAccuracy: true
	// },
	// trackUserLocation: true
	// })
	// );
	</script>

	</body>

	</html>