QuadkeyLayer transitions

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/deck.gl@latest/dist.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.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%;
}

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

JavaScript

const canvas = document.createElement('canvas');
const GL = canvas.getContext('webgl');

const deckGL = new deck.DeckGL({
  controller: true,
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
  initialViewState: {
    latitude: 37.75,
    longitude: -122.45,
    pitch: 20,
    zoom: 11
  },

});

function downSample(data, n) {
  const truncated = data.map(({
    quadkey,
    value
  }) => {
    quadkey = quadkey.slice(0, -1);
    value = 0.25 * value;
    return {
      quadkey,
      value
    };
  });

  const gather = {};
  for (const q of truncated) {
    if (q.quadkey in gather) {
      gather[q.quadkey].value += q.value;
    } else {
      gather[q.quadkey] = q;
    }
  }

  const out = Object.values(gather);
  if (n > 0) {
    return downSample(out, n - 1);
  } else {
    return out;
  }
}

function render(data) {
  const elevationScale = 5000 * Math.random();
  const layers = [
    new deck.QuadkeyLayer({
      id: 'background',
      // data: downSample(DATA, 0),
      data,
      getFillColor: d => [d.value * 255, (1 - d.value) * 255, (1 - d.value) * 128],
      getElevation: d => d.value,
      extruded: true,

      elevationScale,
      transitions: {
        // transition with a duration of 3000ms
        //elevationScale: 600,
        getElevation: {
        	duration: 600,
          enter: () => [0]
        }
      }
    })
  ];

  deckGL.setProps({
    layers
  });
}

setInterval(() => {
  console.log({...DATA})
  render({...DATA);
}, 2000);
render([]);

const DATA = [{
    "quadkey": "0230102033320112",
    "value": 0.076
  },
  {
    "quadkey": "0230102033320113",
    "value": 0.073
  },
  {
    "quadkey": "0230102033320123",
    "value": 0.118
  },
  {
    "quadkey": "0230102033320130",
    "value": 0.14
  },
  {
    "quadkey": "0230102033320131",
    "value": 0.134
  },
  {
    "quadkey": "0230102033320132",
    "value": 0.222
  },
  {
    "quadkey": "0230102033320133",
    "value": 0.229
  },
  {
   ...