ajzeigert/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Seismic test</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

		#returnsSliderContainer {
			position: absolute;
			left: 10px;
			bottom: 0;
			width: 400px;
			/*height: 100px;*/
			/*background-color: white;*/
		}

		#infoWindow {
			position: absolute;
			right: 10px;
			top: 10px;
			bottom: 10px;
			width: 300px;
		}

		#stationInfo {
			overflow-x: auto;

		}

		#liquifactionLegend {

		}

		#infoWindow .panel-footer {
			position: inherit;
			bottom: 0;
		}

		ul#liquifactionLegend {
			list-style: none;
			padding: 0;
			display: table;
			width: 100%;
			font-size: 12px;
			text-align: center;
			color: white;
			opacity: 0.6;
		}

		ul#liquifactionLegend li {
			display: table-cell;
			padding: 4px;
		}

		li.verylow {
			background-color: rgb(255,200,0)
		}

		li.low {
			background-color: rgb(255,106,20)
		}

		li.moderate {
			background-color: rgb(255,190,232)
		}

		li.veryhigh {
			background-color: rgb(0,0,255)
		}

		li.high {
			background-color: rgb(230,0,164)
		}

		p#faultsLegend span {
			color: #7aa0b4;
		}

		#returnSlider .glyphicon {
			color: #00213a;
		}

		span.stationMarker {
			display: block;
			background-color: #4e6601;
			border-radius: 100%;
			width: 20px;
			height: 20px;
			line-height: 8px;
			float: left;
			margin-right: 5px;
		}

    </style>
</head>
<body>

<div id='map'></div>

<div id='infoWindow' class='panel panel-warning'>
	<div class='panel-heading'>
		<h4 class='panel-title'>PGE Seismic</h4>
	</div>
	<ul class="list-group">
		<li class="list-group-item">
			<fieldset id='returnSlider'>
				<label for="returnsSlider"><span class='glyphicon glyphicon-minus'></span> Return period</label>
				<em id="rangeValLabel" style="font-style: normal;">0.30</em>
				<input class='form-control' type ="range" max="0.40" min="0.20"
					onchange="updateReturns(this)"
					step="0.05" name="returnsSlider" id="returnsSlider">
				</input>
				<div class='checkbox'>
					<label>
						<input id='returns' checked='checked' type='checkbox'>Layer visibility
					</label>
				</div>
			</fieldset>
		</li>
	   	<li class="list-group-item">
			<h5>Liquifaction susceptibility</h5>
			<ul id='liquifactionLegend'>
				<li class='verylow'>Very Low</li>
				<li class='low'>Low</li>
				<li class='moderate'>Moderate</li>
				<li class='high'>High</li>
				<li class='veryhigh'>Very High</li>
			</ul>
			<div class='checkbox'>
				<label>
					<input id='liquifaction' checked='checked' type='checkbox'>Layer visibility
				</label>
			</div>
	   	</li>
	   	<li class="list-group-item">
			<h5><span class='stationMarker'> </span> Station info</h5>
			<p id='stationInfo'>Hover over a station for info</p>
		</li>
		<li class='list-group-item'>
			<!-- <h5>Fault lines</h5> -->
			<p id='faultsLegend'><span class='glyphicon glyphicon-minus'></span> Fault lines</p>
			<div class='checkbox'>
				<label>
					<input id='faults' checked='checked' type='checkbox'>Layer visibility
				</label>
			</div>
		</li>
	 </ul>
</div>

<script>

mapboxgl.accessToken = 'pk.eyJ1Ijoic21hcnRtaW5lIiwiYSI6Imt6TUp0cEEifQ.9MrwD6GRlEGj9OTNN-bsRw';

var layers = {
	'seismiclight': 'mapbox://styles/smartmine/cipfppp4d0013banneb4h96ot',
	'satellitestreets': 'mapbox://styles/mapbox/satellite-streets-v9'
}

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: layers.seismiclight, //stylesheet location
    center: [-122.681944, 45.52], // starting position
    zoom: 8, // starting zoom
	hash: true
});

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

	// Add the faults source
	map.addSource('faults', {
		type: 'vector',
		url: 'mapbox://smartmine.151c847h'
	});

	// Add the faults layer
	map.addLayer({
		'id': 'faults',
		'type': 'line',
		'source': 'faults',
		'source-layer': 'usgs_2008_faults',
		'layout': {
			'line-join': 'round',
			'line-cap': 'round'
		},
		'paint': {
			'line-color': '#7aa0b4',
			'line-width': 2,
		}
	}, 'bridge-motorway-2');

	// Add the service area source
	map.addSource('service_area', {
		type: 'vector',
		url: 'mapbox://smartmine.3e84o4gz'
	});

	// Add the service area layer
	map.addLayer({
		'id': 'service_area',
		'type': 'line',
		'source': 'service_area',
		'source-layer': 'service_area',
		'layout': {
			'line-join': 'round',
			'line-cap': 'round'
		},
		'paint': {
			'line-color': '#d9b410',
			'line-width': 2
		}
	}, 'bridge-motorway-2');

	// Add the returns source
	map.addSource('pga_return', {
		type: 'vector',
		url: 'mapbox://smartmine.8ypddtm6'
	});

	// Add the returns layer
	map.addLayer({
		'id': 'return',
		'type': 'line',
		'source': 'pga_return',
		'source-layer': 'pga_return',
		'layout': {
			'line-join': 'round',
			'line-cap': 'round'
		},
		'paint': {
			'line-color': '#00213a',
			'line-width': 2
		},
		"filter": ["==", 'PGARETURN', '0.40']
	}, 'bridge-motorway-2');

	// Add liquifaction source
	map.addSource('liquifaction', {
		'type': 'vector',
		'url': 'mapbox://smartmine.dp32mtne'
	});

	// Add the liquifaction layer
	map.addLayer({
		'id': 'liquifaction',
		'type': 'fill',
		'source': 'liquifaction',
		'source-layer': 'liquifaction',
		'layout': {},
		'paint': {
			'fill-color': {
				property: 'Label',
				type: 'categorical',
				stops: [
					['Very Low', 'rgb(255,200,0)'],
					['Low', 'rgb(255,106,20)'],
					['Moderate', 'rgb(255,190,232)'],
					['Very High', 'rgb(0,0,255)'],
					['High', 'rgb(230,0,164)']
				]
			},
			'fill-opacity': 0.6
			// 'line-width': 2
		},
		// "filter": ["==", 'Label', 'Very Low']
	},'bridge-motorway-2');


	// Add the station locations
	map.addSource('stations', {
		type: 'vector',
		url: 'mapbox://smartmine.50p0evpi'
	});

	// Add the stations layer
	map.addLayer({
		'id': 'stations',
		'type': 'circle',
		'source': 'stations',
		'source-layer': 'station_locations',
		'paint': {
			'circle-radius': 8,
			'circle-color': '#7a9e00',
			'circle-opacity': 0.8
		}
	}, 'bridge-motorway-2');

	// Add the stations layer
	map.addLayer({
		'id': 'stations_highlight',
		'type': 'circle',
		'source': 'stations',
		'source-layer': 'station_locations',
		'paint': {
			'circle-radius': 12,
			'circle-color': '#4e6601',
			'circle-opacity': 1
		},
		"filter": ["==", 'OBJECTID', '']

	}, 'bridge-motorway-2');

	// Add zoom and rotation controls to the map.
	map.addControl(new mapboxgl.Navigation({
		position: 'top-left'
	}));

	// Add geolocate controls to the map
	map.addControl(new mapboxgl.Geolocate({
		position: 'top-left'
	}));

});

map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['stations', 'stations_highlight'] });
    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
        // popup.remove();
        return;
    }

    var feature = features[0];
	// console.log(feature);

	map.setFilter('stations_highlight', ["==", 'OBJECTID', feature.id])

    // Populate the popup and set its coordinates
    // based on the feature found.
	document.getElementById('stationInfo').innerHTML = JSON.stringify(feature.properties, null, '\n');
});

var updateReturns = function(slider){
	var value = new Number(slider.value).toPrecision(2);
	// console.log(value);
	document.getElementById('rangeValLabel').innerHTML = value;
	map.setFilter('return', ['==', 'PGARETURN', value]);
};

document.getElementById('liquifaction').addEventListener('change', function(e){
	map.setLayoutProperty('liquifaction', 'visibility',
		e.target.checked ? 'visible' : 'none')
});

document.getElementById('returns').addEventListener('change', function(e){
	map.setLayoutProperty('return', 'visibility',
		e.target.checked ? 'visible' : 'none')
});

document.getElementById('faults').addEventListener('change', function(e){
	map.setLayoutProperty('faults', 'visibility',
		e.target.checked ? 'visible' : 'none')
});

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Seismic test</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }

	#returnsSliderContainer {
	position: absolute;
	left: 10px;
	bottom: 0;
	width: 400px;
	/height: 100px;/
	/background-color: white;/
	}

	#infoWindow {
	position: absolute;
	right: 10px;
	top: 10px;
	bottom: 10px;
	width: 300px;
	}

	#stationInfo {
	overflow-x: auto;

	}

	#liquifactionLegend {

	}

	#infoWindow .panel-footer {
	position: inherit;
	bottom: 0;
	}

	ul#liquifactionLegend {
	list-style: none;
	padding: 0;
	display: table;
	width: 100%;
	font-size: 12px;
	text-align: center;
	color: white;
	opacity: 0.6;
	}

	ul#liquifactionLegend li {
	display: table-cell;
	padding: 4px;
	}

	li.verylow {
	background-color: rgb(255,200,0)
	}

	li.low {
	background-color: rgb(255,106,20)
	}

	li.moderate {
	background-color: rgb(255,190,232)
	}

	li.veryhigh {
	background-color: rgb(0,0,255)
	}

	li.high {
	background-color: rgb(230,0,164)
	}

	p#faultsLegend span {
	color: #7aa0b4;
	}

	#returnSlider .glyphicon {
	color: #00213a;
	}

	span.stationMarker {
	display: block;
	background-color: #4e6601;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 8px;
	float: left;
	margin-right: 5px;
	}

	</style>
	</head>
	<body>

	<div id='map'></div>

	<div id='infoWindow' class='panel panel-warning'>
	<div class='panel-heading'>
	<h4 class='panel-title'>PGE Seismic</h4>
	</div>
	<ul class="list-group">
	<li class="list-group-item">
	<fieldset id='returnSlider'>
	<label for="returnsSlider"><span class='glyphicon glyphicon-minus'></span> Return period</label>
	<em id="rangeValLabel" style="font-style: normal;">0.30</em>
	<input class='form-control' type ="range" max="0.40" min="0.20"
	onchange="updateReturns(this)"
	step="0.05" name="returnsSlider" id="returnsSlider">
	</input>
	<div class='checkbox'>
	<label>
	<input id='returns' checked='checked' type='checkbox'>Layer visibility
	</label>
	</div>
	</fieldset>
	</li>
	<li class="list-group-item">
	<h5>Liquifaction susceptibility</h5>
	<ul id='liquifactionLegend'>
	<li class='verylow'>Very Low</li>
	<li class='low'>Low</li>
	<li class='moderate'>Moderate</li>
	<li class='high'>High</li>
	<li class='veryhigh'>Very High</li>
	</ul>
	<div class='checkbox'>
	<label>
	<input id='liquifaction' checked='checked' type='checkbox'>Layer visibility
	</label>
	</div>
	</li>
	<li class="list-group-item">
	<h5><span class='stationMarker'> </span> Station info</h5>
	<p id='stationInfo'>Hover over a station for info</p>
	</li>
	<li class='list-group-item'>
	<!-- <h5>Fault lines</h5> -->
	<p id='faultsLegend'><span class='glyphicon glyphicon-minus'></span> Fault lines</p>
	<div class='checkbox'>
	<label>
	<input id='faults' checked='checked' type='checkbox'>Layer visibility
	</label>
	</div>
	</li>
	</ul>
	</div>

	<script>

	mapboxgl.accessToken = 'pk.eyJ1Ijoic21hcnRtaW5lIiwiYSI6Imt6TUp0cEEifQ.9MrwD6GRlEGj9OTNN-bsRw';

	var layers = {
	'seismiclight': 'mapbox://styles/smartmine/cipfppp4d0013banneb4h96ot',
	'satellitestreets': 'mapbox://styles/mapbox/satellite-streets-v9'
	}

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: layers.seismiclight, //stylesheet location
	center: [-122.681944, 45.52], // starting position
	zoom: 8, // starting zoom
	hash: true
	});

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

	// Add the faults source
	map.addSource('faults', {
	type: 'vector',
	url: 'mapbox://smartmine.151c847h'
	});

	// Add the faults layer
	map.addLayer({
	'id': 'faults',
	'type': 'line',
	'source': 'faults',
	'source-layer': 'usgs_2008_faults',
	'layout': {
	'line-join': 'round',
	'line-cap': 'round'
	},
	'paint': {
	'line-color': '#7aa0b4',
	'line-width': 2,
	}
	}, 'bridge-motorway-2');

	// Add the service area source
	map.addSource('service_area', {
	type: 'vector',
	url: 'mapbox://smartmine.3e84o4gz'
	});

	// Add the service area layer
	map.addLayer({
	'id': 'service_area',
	'type': 'line',
	'source': 'service_area',
	'source-layer': 'service_area',
	'layout': {
	'line-join': 'round',
	'line-cap': 'round'
	},
	'paint': {
	'line-color': '#d9b410',
	'line-width': 2
	}
	}, 'bridge-motorway-2');

	// Add the returns source
	map.addSource('pga_return', {
	type: 'vector',
	url: 'mapbox://smartmine.8ypddtm6'
	});

	// Add the returns layer
	map.addLayer({
	'id': 'return',
	'type': 'line',
	'source': 'pga_return',
	'source-layer': 'pga_return',
	'layout': {
	'line-join': 'round',
	'line-cap': 'round'
	},
	'paint': {
	'line-color': '#00213a',
	'line-width': 2
	},
	"filter": ["==", 'PGARETURN', '0.40']
	}, 'bridge-motorway-2');

	// Add liquifaction source
	map.addSource('liquifaction', {
	'type': 'vector',
	'url': 'mapbox://smartmine.dp32mtne'
	});

	// Add the liquifaction layer
	map.addLayer({
	'id': 'liquifaction',
	'type': 'fill',
	'source': 'liquifaction',
	'source-layer': 'liquifaction',
	'layout': {},
	'paint': {
	'fill-color': {
	property: 'Label',
	type: 'categorical',
	stops: [
	['Very Low', 'rgb(255,200,0)'],
	['Low', 'rgb(255,106,20)'],
	['Moderate', 'rgb(255,190,232)'],
	['Very High', 'rgb(0,0,255)'],
	['High', 'rgb(230,0,164)']
	]
	},
	'fill-opacity': 0.6
	// 'line-width': 2
	},
	// "filter": ["==", 'Label', 'Very Low']
	},'bridge-motorway-2');


	// Add the station locations
	map.addSource('stations', {
	type: 'vector',
	url: 'mapbox://smartmine.50p0evpi'
	});

	// Add the stations layer
	map.addLayer({
	'id': 'stations',
	'type': 'circle',
	'source': 'stations',
	'source-layer': 'station_locations',
	'paint': {
	'circle-radius': 8,
	'circle-color': '#7a9e00',
	'circle-opacity': 0.8
	}
	}, 'bridge-motorway-2');

	// Add the stations layer
	map.addLayer({
	'id': 'stations_highlight',
	'type': 'circle',
	'source': 'stations',
	'source-layer': 'station_locations',
	'paint': {
	'circle-radius': 12,
	'circle-color': '#4e6601',
	'circle-opacity': 1
	},
	"filter": ["==", 'OBJECTID', '']

	}, 'bridge-motorway-2');

	// Add zoom and rotation controls to the map.
	map.addControl(new mapboxgl.Navigation({
	position: 'top-left'
	}));

	// Add geolocate controls to the map
	map.addControl(new mapboxgl.Geolocate({
	position: 'top-left'
	}));

	});

	map.on('mousemove', function(e) {
	var features = map.queryRenderedFeatures(e.point, { layers: ['stations', 'stations_highlight'] });
	// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

	if (!features.length) {
	// popup.remove();
	return;
	}

	var feature = features[0];
	// console.log(feature);

	map.setFilter('stations_highlight', ["==", 'OBJECTID', feature.id])

	// Populate the popup and set its coordinates
	// based on the feature found.
	document.getElementById('stationInfo').innerHTML = JSON.stringify(feature.properties, null, '\n');
	});

	var updateReturns = function(slider){
	var value = new Number(slider.value).toPrecision(2);
	// console.log(value);
	document.getElementById('rangeValLabel').innerHTML = value;
	map.setFilter('return', ['==', 'PGARETURN', value]);
	};

	document.getElementById('liquifaction').addEventListener('change', function(e){
	map.setLayoutProperty('liquifaction', 'visibility',
	e.target.checked ? 'visible' : 'none')
	});

	document.getElementById('returns').addEventListener('change', function(e){
	map.setLayoutProperty('return', 'visibility',
	e.target.checked ? 'visible' : 'none')
	});

	document.getElementById('faults').addEventListener('change', function(e){
	map.setLayoutProperty('faults', 'visibility',
	e.target.checked ? 'visible' : 'none')
	});

	</script>

	</body>
	</html>