Skip to content

Instantly share code, notes, and snippets.

@ajzeigert
Last active June 21, 2016 18:18
Show Gist options
  • Save ajzeigert/da53442eacfc9e79eb3fc7625437b360 to your computer and use it in GitHub Desktop.
Save ajzeigert/da53442eacfc9e79eb3fc7625437b360 to your computer and use it in GitHub Desktop.
Testing some layer stuff in mapbox gl js
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment