sidetrackedmind/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bus Route Selector</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; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

	#console {
		  position: absolute;
		  width: 240px;
		  margin: 10px;
		  padding: 10px 20px;
		  background-color: white;
		}

	.session {
		margin-bottom: 20px;
	}
	.row {
		  height: 12px;
		  width: 100%;
		}

	#menu {
	background: #fff;
	position: absolute;
	z-index: 1;
	top: 10px;
	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;
	}

	.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}

ul {
	padding-inline-start: 0px;
}

li {
  color: #333;
  list-style-position: inside;
  margin-bottom: 2px;
  padding: 4px 0 4px 10px;
}
li:hover {
  background-color: #999;
}

/* map overlay for dropdown */

</style>

</head>
<body>
<nav id="menu"></nav>
<div id="map"></div>
<div id='console'>
	<h1>Bus Route Selector</h1>
	<p>Data Derived From <a href='http://pugetsound.onebusaway.org/' target='blank'>Puget Sound One Bus Away</a></p>
	<div class='session'>
		<h4>selected routes</h4>
		<ul class='legend' id='selected_route_list'></ul>
	</div>
</div>


<script>

// console.log(hexbin_shape)
	mapboxgl.accessToken = 'pk.eyJ1Ijoic2lkZXRyYWNrZWRtaW5kIiwiYSI6ImNrN2h6b3JpeDAwbmozbW1hc3d0MDg5azEifQ.JyhKY2IKA1-lczYr8kxc7Q';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/dark-v10', // stylesheet location
center: [-122.328146, 47.602546], // starting position [lng, lat]
zoom: 12 // starting zoom
});


var hoveredStateId = null;

map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl());


function LineOpacityBy(route_array) {
	map.setPaintProperty('route_lines',
						'line-opacity',
							[
							'case',
							["boolean",['in', ['get','shape_id'], ["literal",route_array]]],
							1,
							0.01
							]
						)
}

function StopOpacityBy(route_array) {
	map.setPaintProperty('all_stop_points',
						'circle-opacity',
							[
							'case',
							["boolean",['in', ['get','shape_id'], ["literal",route_array]]],
							1,
							0.01
							]
						)
}


map.on('load', function() {


// web source
map.addSource('all_route_lines', {
					type: 'geojson',
					data: 'https://meysohn-sandbox.s3.amazonaws.com/seattle-bustime/top_gtfs_shapes.geojson'
				});

map.addLayer({
    'id': 'route_lines',
    'type': 'line',
    'source': 'all_route_lines',
	'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#03fcba',
'line-width': 2,
'line-opacity': 1
}
  });

//   filterBy(select_group_array);

  map.addSource('all_stops', {
					type: 'geojson',
					data: 'https://meysohn-sandbox.s3.amazonaws.com/seattle-bustime/top_gtfs_stops.geojson'
				});


map.addLayer({
    'id': 'all_stop_points',
    'type': 'circle',
    'source': 'all_stops',
'paint': {
'circle-color': '#52bff2',
'circle-opacity': 0.01
}
  });


map.on('click', function(e) {
	let f = map.queryRenderedFeatures(e.point, { layers: ['route_lines']});
	if (f.length) {
		console.log("you clicked at least one layer!");
		var array_length = f.length;
		var select_route_array_properties = f.map(i => i.properties)
		console.log(select_route_array_properties)
		var select_shape_array = f.map(i => i.properties.shape_id)
		var Obj = document.getElementById('selected_route_list');
		var inner_list = select_route_array_properties.map(function(work) {
          					return `<li id=${work.shape_id}>${work.route_short_name} - ${work.trip_headsign}</li>`
        						}).join('')
		var new_str = "<ul class='legend' id='selected_route_list'>"+inner_list+"</ul>"
		Obj.outerHTML=new_str;
		console.log(new_str)
		console.log(select_shape_array)
		LineOpacityBy(select_shape_array);
		StopOpacityBy(select_shape_array);
		document.getElementById("selected_route_list").addEventListener("click",function(e) {
        // e.target is our targetted element.
                    // try doing console.log(e.target.nodeName), it will result LI
        if(e.target && e.target.nodeName == "LI") {
			clicked_route = e.target.id
            console.log(clicked_route + " was clicked");
			clicked_route_single = Array(clicked_route)
			console.log(clicked_route_single)
			LineOpacityBy(clicked_route_single);
			StopOpacityBy(clicked_route_single);

        }
    });
	}
	else {
		console.log("you didn't click a layer!");
		map.setPaintProperty('route_lines',
						'line-opacity',1);
		map.setPaintProperty('all_stop_points',
						'circle-opacity',0.01)
		var Obj = document.getElementById('selected_route_list');

		var new_str = "<ul class='legend' id='selected_route_list'></ul>"
		Obj.outerHTML=new_str;
	}

}
);

map.on('click', function(e) {
	let f = map.queryRenderedFeatures(e.point, { layers: ['all_stop_points']});
	if (f.length) {
		var select_stop_array_properties = f.map(i => i.properties)
		var pop_up_str = select_stop_array_properties.map(function(work) {
          					return `<p id=${work.stop_id}>${work.stop_name}</p>`
        						}).join('')
		console.log(pop_up_str)
    }
	else {
		console.log("you did not click on a stop")
	}

}
);

// Change the cursor to a pointer when the mou.
map.on('mouseenter', 'route_lines', function() {
map.getCanvas().style.cursor = 'pointer';
});

// Change it back to a pointer when it leaves.
map.on('mouseleave', 'route_lines', function() {
map.getCanvas().style.cursor = '';
});


});

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Bus Route Selector</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; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

	#console {
	position: absolute;
	width: 240px;
	margin: 10px;
	padding: 10px 20px;
	background-color: white;
	}

	.session {
	margin-bottom: 20px;
	}
	.row {
	height: 12px;
	width: 100%;
	}

	#menu {
	background: #fff;
	position: absolute;
	z-index: 1;
	top: 10px;
	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;
	}

	.mapboxgl-popup {
	max-width: 400px;
	font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	}

	ul {
	padding-inline-start: 0px;
	}

	li {
	color: #333;
	list-style-position: inside;
	margin-bottom: 2px;
	padding: 4px 0 4px 10px;
	}
	li:hover {
	background-color: #999;
	}

	/* map overlay for dropdown */

	</style>

	</head>
	<body>
	<nav id="menu"></nav>
	<div id="map"></div>
	<div id='console'>
	<h1>Bus Route Selector</h1>
	<p>Data Derived From <a href='http://pugetsound.onebusaway.org/' target='blank'>Puget Sound One Bus Away</a></p>
	<div class='session'>
	<h4>selected routes</h4>
	<ul class='legend' id='selected_route_list'></ul>
	</div>
	</div>


	<script>

	// console.log(hexbin_shape)
	mapboxgl.accessToken = 'pk.eyJ1Ijoic2lkZXRyYWNrZWRtaW5kIiwiYSI6ImNrN2h6b3JpeDAwbmozbW1hc3d0MDg5azEifQ.JyhKY2IKA1-lczYr8kxc7Q';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/dark-v10', // stylesheet location
	center: [-122.328146, 47.602546], // starting position [lng, lat]
	zoom: 12 // starting zoom
	});


	var hoveredStateId = null;

	map.addControl(new mapboxgl.NavigationControl());
	map.addControl(new mapboxgl.FullscreenControl());


	function LineOpacityBy(route_array) {
	map.setPaintProperty('route_lines',
	'line-opacity',
	[
	'case',
	["boolean",['in', ['get','shape_id'], ["literal",route_array]]],
	1,
	0.01
	]
	)
	}

	function StopOpacityBy(route_array) {
	map.setPaintProperty('all_stop_points',
	'circle-opacity',
	[
	'case',
	["boolean",['in', ['get','shape_id'], ["literal",route_array]]],
	1,
	0.01
	]
	)
	}


	map.on('load', function() {


	// web source
	map.addSource('all_route_lines', {
	type: 'geojson',
	data: 'https://meysohn-sandbox.s3.amazonaws.com/seattle-bustime/top_gtfs_shapes.geojson'
	});

	map.addLayer({
	'id': 'route_lines',
	'type': 'line',
	'source': 'all_route_lines',
	'layout': {
	'line-join': 'round',
	'line-cap': 'round'
	},
	'paint': {
	'line-color': '#03fcba',
	'line-width': 2,
	'line-opacity': 1
	}
	});

	// filterBy(select_group_array);

	map.addSource('all_stops', {
	type: 'geojson',
	data: 'https://meysohn-sandbox.s3.amazonaws.com/seattle-bustime/top_gtfs_stops.geojson'
	});


	map.addLayer({
	'id': 'all_stop_points',
	'type': 'circle',
	'source': 'all_stops',
	'paint': {
	'circle-color': '#52bff2',
	'circle-opacity': 0.01
	}
	});


	map.on('click', function(e) {
	let f = map.queryRenderedFeatures(e.point, { layers: ['route_lines']});
	if (f.length) {
	console.log("you clicked at least one layer!");
	var array_length = f.length;
	var select_route_array_properties = f.map(i => i.properties)
	console.log(select_route_array_properties)
	var select_shape_array = f.map(i => i.properties.shape_id)
	var Obj = document.getElementById('selected_route_list');
	var inner_list = select_route_array_properties.map(function(work) {
	return `<li id=${work.shape_id}>${work.route_short_name} - ${work.trip_headsign}</li>`
	}).join('')
	var new_str = "<ul class='legend' id='selected_route_list'>"+inner_list+"</ul>"
	Obj.outerHTML=new_str;
	console.log(new_str)
	console.log(select_shape_array)
	LineOpacityBy(select_shape_array);
	StopOpacityBy(select_shape_array);
	document.getElementById("selected_route_list").addEventListener("click",function(e) {
	// e.target is our targetted element.
	// try doing console.log(e.target.nodeName), it will result LI
	if(e.target && e.target.nodeName == "LI") {
	clicked_route = e.target.id
	console.log(clicked_route + " was clicked");
	clicked_route_single = Array(clicked_route)
	console.log(clicked_route_single)
	LineOpacityBy(clicked_route_single);
	StopOpacityBy(clicked_route_single);

	}
	});
	}
	else {
	console.log("you didn't click a layer!");
	map.setPaintProperty('route_lines',
	'line-opacity',1);
	map.setPaintProperty('all_stop_points',
	'circle-opacity',0.01)
	var Obj = document.getElementById('selected_route_list');

	var new_str = "<ul class='legend' id='selected_route_list'></ul>"
	Obj.outerHTML=new_str;
	}

	}
	);

	map.on('click', function(e) {
	let f = map.queryRenderedFeatures(e.point, { layers: ['all_stop_points']});
	if (f.length) {
	var select_stop_array_properties = f.map(i => i.properties)
	var pop_up_str = select_stop_array_properties.map(function(work) {
	return `<p id=${work.stop_id}>${work.stop_name}</p>`
	}).join('')
	console.log(pop_up_str)
	}
	else {
	console.log("you did not click on a stop")
	}

	}
	);

	// Change the cursor to a pointer when the mou.
	map.on('mouseenter', 'route_lines', function() {
	map.getCanvas().style.cursor = 'pointer';
	});

	// Change it back to a pointer when it leaves.
	map.on('mouseleave', 'route_lines', function() {
	map.getCanvas().style.cursor = '';
	});


	});

	</script>

	</body>
	</html>