deck render bug

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Deck.gl</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://unpkg.com/@deck.gl/[email protected]/dist.min.js"></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

// To trigger bug:
// - Open https://deck.gl/docs/api-reference/geo-layers/mvt-layer in another tab
// - Return here and drag deck.gl canvas to trigger render
// - Red circle will disappear
// - Open this fiddle again in a fresh tab
// - Return here and drag deck.gl canvas to trigger render
// - Red circle will re-appear
const circle = [];
const n = 65535;
const step = (2 * Math.PI) / n;
for (let i = 0; i < n; i++) {
  circle.push([40 * Math.sin(step * i), 40 * Math.cos(step * i)]);
}

const layers = [
  // RED: instanceCount of 65536
  new deck.SolidPolygonLayer({
    id: 'instanceCount-65536',
    data: [circle],
    getPolygon: d => d,
    getFillColor: [212, 34, 67, 180],
    extruded: false
  }),
  // GREEN: instanceCount of 65535
  new deck.SolidPolygonLayer({
    id: 'instanceCount-65535',
    data: [circle.slice(0, -1).map(c => [c[0] - 100, c[1]])],
    getPolygon: d => d,
    getFillColor: [34, 212, 67, 180],
    extruded: false
  })
]

const deckgl = new deck.DeckGL({
  container: 'map',
  controller: true,
  initialViewState: {
    latitude: 0,
    longitude: -50,
    zoom: 1
  },
  layers
});