tmcw/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Files for the example in The end of CartoCSS.
The corresponding data is available here: https://www.mapbox.com/bites/00261/plants.min.json (1MB file)

  
## index.html
<!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>

## site.js
'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();
});
	<!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();
	});