EB Climate orgs

by nicolejlj

HTML

<div id="floating-panel">
  <button onclick="toggleHeatmap()">Toggle Heatmap</button>
  <button onclick="changeGradient()">Change gradient</button>
  <button onclick="changeRadius()">Change radius</button>
  <button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9zR8aQsW7Ay--CqtwusOhmD3kyciW3V0&libraries=visualization">
</script>

CSS

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  background-color: #fff;
  border: 1px solid #999;
  left: 25%;
  padding: 5px;
  position: absolute;
  top: 10px;
  z-index: 5;
}

JavaScript

var map, heatmap;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 37.775, lng: -122.434},
    mapTypeId: 'satellite'
  });

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: getPoints(),
    map: map
  });
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius() {
  heatmap.set('radius', heatmap.get('radius') ? null : 20);
}

function changeOpacity() {
  heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

function getPoints() {
  return [
          new google.maps.LatLng(37.889456, -122.296076),
          new google.maps.LatLng(37.889456, -122.296076),
          new google.maps.LatLng(37.889456, -122.296076),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.872626, -122.273808),
          new google.maps.LatLng(37.913618, -122.307631),
          new google.maps.LatLng(37.913618, -122.307631),
          new...