ajzeigert · June 21, 2016 18:18
diff --git a/index.html b/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>