H3 animation

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>H3 animation</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    
    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />


    <!-- 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%;
}

#textfield {
  position: absolute;
  left: 10px;
  top: 10px;
  background: snow;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  padding: 10px;
  
}

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

JavaScript

// Create test data
const TIMESTEPS = 170;
const HEXAGONS = h3.h3ToChildren('823907fffffffff', 7);
const DATA = HEXAGONS.map((hexagon, i) => ({
  hexagon,
  values: (new Array(TIMESTEPS)).fill().map((n, t) => (i + t) % TIMESTEPS)
}));


// Visualization
function createHexagonLayer(time) {
  return new deck.H3HexagonLayer({
    id: `hexagons`,
    data: DATA,
    getHexagon: d => d.hexagon,
    getFillColor: d => [255 - d.values[time], d.values[time], 0],
    
    // Only update the color when time changes for performance
    updateTriggers: {
      getFillColor: time
    },
    extruded: false
  });
}

const initialViewState = {
  latitude: 40,
  longitude: -6,
  zoom: 6,
}

const d = new deck.DeckGL({
  container: 'map',
  mapStyle: deck.carto.BASEMAP.DARK_MATTER,
  controller: true,
  initialViewState
});

let time = 0;
function update() {
  d.setProps({
    layers: [createHexagonLayer(time)]
  });
  time = (time + 1) % TIMESTEPS;
  requestAnimationFrame(update);
}
update();