deck+Google HexagonLayer

by carto

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/@loaders.gl/[email protected]/dist/dist.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
        <script src="https://unpkg.com/@tweenjs/[email protected]/dist/tween.umd.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 DATA_URL =
  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';

let map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {lat: 52, lng: -1.4},
    heading: -27,
    gestureHandling: 'greedy',
    mapId: 'fae05836df2dc8bb',
    mapTypeId: 'satellite',
    tilt: 40.5,
    minZoom: 5,
    maxZoom: 10,
    zoom: 7
  });

  const hexagonLayer = new deck.HexagonLayer({
    id: 'hexagon',
    colorRange,
    coverage: 1,
    data: fetch(DATA_URL)
      .then(response => response.arrayBuffer())
      .then(buffer => CSVLoader.parse(buffer)),
    elevationRange: [0, 3000],
    elevationScale: 50,
    extruded: true,
    getPosition: d => [d.lng, d.lat],
    pickable: true,
    radius: 1000,
    upperPercentile: 100,
    material,
    transitions: {
      elevationScale: 3000
    }
  });

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

const colorRange = [
  [1, 152, 189],
  [73, 227, 206],
  [216, 254, 181],
  [254, 237, 177],
  [254, 173, 84],
  [209, 55, 78]
];

const ambientLight = new deck.AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

const pointLight1 = new deck.PointLight({
  color: [255, 255, 255],
  intensity: 0.8,
  position: [-0.144528, 49.739968, 80000]
});

const pointLight2 = new deck.PointLight({
  color: [255, 255, 255],
  intensity: 0.8,
  position: [-3.807751, 54.104682, 8000]
});

const lightingEffect = new deck.LightingEffect({
  ambientLight,
  pointLight1,
  pointLight2
});

const material = {
  ambient: 0.64,
  diffuse: 0.6,
  shininess: 32,
  specularColor: [51, 51, 51]
};

initMap();


// After 3 seconds zoom
setTimeout(() => {
  const flyTween = flyTo({
    zoom: 4,
    tilt: 50,
    heading: 10
  })
  flyTween.start();
}, 3000);

// ...and then zoom out
/* setTimeout(() => {
  const flyTween = flyTo({
    zoom: 10,
  })
  flyTween.start();
}, 5000); */

// Camera...