deck+Google ContourLayer

by felixp

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>deck.gl+Google</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&v=beta&map_ids=fae05836df2dc8bb"
    ></script> 
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

const COUNTY_DATA =
  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/contour/covid-by-county.json';

const BANDS = [
  {threshold: [0.1, 1], color: [255, 255, 178]},
  {threshold: [1, 10], color: [254, 204, 92]},
  {threshold: [10, 100], color: [253, 141, 60]},
  {threshold: [100, 500], color: [240, 59, 32]},
  {threshold: [500, 2000], color: [189, 0, 38]},
  {threshold: [2000, 10000], color: [159, 0, 80]}
];

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {lat: 40, lng: -100},
    maxZoom: 4,
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    zoom: 3
  });

	const week = 35;
  const contourLayer = new deck.ContourLayer({
      data: COUNTY_DATA,
      id: 'contour-layer',
      getPosition: d => [d.longitude, d.latitude],
      getWeight: d => ((d.casesByWeek[week] || 0) / d.population) * 1e5,
      updateTriggers: {
        getWeight: week
      },
      pickable: true,
      aggregation: 'MAX',
      contours: BANDS,
      cellSize: 60000
    })

  const overlay = new deck.GoogleMapsOverlay({
    layers: [contourLayer]
  });
  overlay.setMap(map);
}

initMap();