Skip to content

Instantly share code, notes, and snippets.

@tmcw
Last active March 29, 2017 06:13
Show Gist options
  • Save tmcw/559e817b09a7b8325928038e6f086b2e to your computer and use it in GitHub Desktop.
Save tmcw/559e817b09a7b8325928038e6f086b2e to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' /><Paste>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; bottom:0; top:0; width:100%; }
#types-container { position:absolute; bottom:0; width:100%; }
#types { position:absolute; bottom:0; height: 100px; width:100%; }
.mapboxgl-popup-content { pointer-events: none !important; }
.output-property { cursor: pointer; }
.output-property.active { background: #000; }
</style>
</head>
<body>
<div id='map'></div>
<div id='types-container' class='fill-dark pad2 dark'>
<div class='inline strong pad2x pad1y'>
Power Plant Output
</div>
<a class='pad0y pad1x output-property round' id='t'>Total</a><a
class='pad0y pad1x output-property round' id='c'>Coal</a><a
class='pad0y pad1x output-property round' id='ng'>Natural Gas</a><a
class='pad0y pad1x output-property round' id='h'>Hydroelectric</a><a
class='pad0y pad1x output-property round' id='w'>Wind</a>
<div class='pad2x fr'>
<div class='inline' style='margin:0 10px;vertical-align:middle;background:#FBF2AD;width:32px;height:32px;border-radius:16px;border:1px solid #8E7758;'></div>
2,000 MW
</div>
<a class='small pin-bottomright pad0' href='https://www.eia.gov/maps/layer_info-m.cfm'>Source: EIA</a>
</div>
<script src='site.js'></script>
'use strict';
mapboxgl.accessToken = 'your access token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v9',
center: [-90, 38],
zoom: 4
});
map.on('load', function () {
map.addSource('power-plants', {
'type': 'geojson',
'data': 'plants.min.json'
});
// create a new scaled point layer. waterway-label is the layer
// it's placed behind: that means that our map labels will still be
// legible on top of the data
map.addLayer({
'id': 'power-plants',
'source': 'power-plants',
'type': 'circle',
'paint': {
'circle-opacity': 0.7,
'circle-color': '#FBF2AD'
}
}, 'waterway-label');
// this is how we make the buttons work. first, we find all the buttons
// on the page with querySelectorAll, and connect click events on
// each button to the showByOutputType method
var buttons = document.querySelectorAll('.output-property');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = showByOutputType;
}
// and then that method changes the `circle-radius` method depending
// on the id of each button, referred to here as this.id, which also
// happens to be a property name in the data loaded into the map
function showByOutputType() {
map.setPaintProperty('power-plants', 'circle-radius', {
property: this.id,
stops: [
[{zoom: 0, value: 0}, 1],
[{zoom: 0, value: 2000}, 16]
]
});
// and then this code highlights the active button
for (var i = 0; i < buttons.length; i++) {
if (buttons[i] === this) buttons[i].classList.add('active');
else buttons[i].classList.remove('active');
}
}
// and this button pulls the power output for each plant and its
// name and shows it in a popup on the map
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, {
layers: ['power-plants']
});
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
if (!features.length) {
return popup.remove();
}
var feature = features[0];
popup.setLngLat(feature.geometry.coordinates)
.setHTML(feature.properties.n + ': ' +
Math.round(feature.properties[map.getPaintProperty(
'power-plants', 'circle-radius').property]) + ' MW')
.addTo(map);
});
// then we kick off the visualization by showing the total MW
// initially, by clicking the first button.
document.getElementById('t').click();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment