kalimar/index.html

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