block by ajzeigert da53442eacfc9e79eb3fc7625437b360

Testing some layer stuff in mapbox gl js

Full Screen

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>