kalimar · March 20, 2020 15:31
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.eyJ1IjoibGVtd2Vya3MiLCJhIjoiY2p1ZTRoYnd1MGxpNTQ0cjE0Mjl1cHRrYiJ9.kU435578KS5vrCHNwZX2kA';
 		// Set bounds to Austin, TX
 		var bounds = [
 			[-98.0261770004211, 30.0678640288457], // Southwest coordinates
 			[-97.5416001207618, 30.5194859159522] // Northeast coordinates
 		];
 		// Instantiat the map, Set Zoom, Center and Style

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



 		var toggleableLayerIds = ['austin-runs', 'austin-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 = id;

 			link.onclick = function(e) {
 				var clickedLayer = this.textContent;
 				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.eyJ1IjoibGVtd2Vya3MiLCJhIjoiY2p1ZTRoYnd1MGxpNTQ0cjE0Mjl1cHRrYiJ9.kU435578KS5vrCHNwZX2kA';
	// Set bounds to Austin, TX
	var bounds = [
	[-98.0261770004211, 30.0678640288457], // Southwest coordinates
	[-97.5416001207618, 30.5194859159522] // Northeast coordinates
	];
	// Instantiat the map, Set Zoom, Center and Style

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



	var toggleableLayerIds = ['austin-runs', 'austin-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 = id;

	link.onclick = function(e) {
	var clickedLayer = this.textContent;
	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>