QuadkeyLayer transitions

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Quadkey</title>
    <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 DATA = [{
    "quadkey": "02301020333200",
    "value": 0,
  },
  {
    "quadkey": "02301020333201",
    "value": 1,
  },
  {
    "quadkey": "02301020333210",
    "value": 2,
  },
  {
    "quadkey": "02301020333211",
    "value": 3,
  },
  {
    "quadkey": "02301020333202",
    "value": 4,
  },
  {
    "quadkey": "02301020333203",
    "value": 5,
  },
  {
    "quadkey": "02301020333212",
    "value": 6,
  },
  {
    "quadkey": "02301020333213",
    "value": 7,
  },
  {
    "quadkey": "02301020333220",
    "value": 8,
  },
  {
    "quadkey": "02301020333221",
    "value": 9,
  },
  {
    "quadkey": "02301020333230",
    "value": 10,
  },
  {
    "quadkey": "02301020333231",
    "value": 11,
  },
  {
    "quadkey": "02301020333222",
    "value": 12,
  },
  {
    "quadkey": "02301020333223",
    "value": 13,
  },
  {
    "quadkey": "02301020333232",
    "value": 14,
  },
  {
    "quadkey": "02301020333233",
    "value": 15,
  }
];

const DECK = [0, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0];
const LOADERS = [0, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1];
const LUMA = [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0];

const logos = [{
    bits: DECK,
    title: 'DECK.GL'
  },
  {
    bits: LOADERS,
    title: 'LOADERS.GL'
  },
  {
    bits: LUMA,
    title: 'LUMA.GL'
  }
];

const views = logos.map(({
  title
}, i) => new deck.MapView({
  id: title,
  controller: true,
  y: `${100 * i / logos.length}%`,
  height: `${100 / logos.length}%`
}));


const initialViewState = {
  latitude: 37.744,
  longitude: -122.48,
  pitch: 42,
  bearing: 32,
  zoom: 10
}


const layers = logos.map(({
  bits,
  title
}) => [
  new deck.QuadkeyLayer({
    id: `${title}-logo`,
    data: DATA,
    getFillColor: d => !bits[d.value] ? [d.value * 16, 150, 150] : [d.value * 16, 0, 0],
    getLineColor: [255, 255, 255],
    stroked: true,
    lineWidthMinPixels: 3,
    parameters: {
      depthTest: false
    },
  }),
  new deck.TextLayer({
    id: `${title}-label`,
    data: [
     ...