Point bug v8 workaround

by felixp

HTML

<html>

  <head>
    <script src="https://unpkg.com/[email protected]/runtime.js"></script>
    
    <script src="https://unpkg.com/deck.gl@^8.9.36/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    
    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

#map {
  width: 100vw; 
  height: 100vh;
}

JavaScript

deck.carto.fetchMap({
  cartoMapId: 'bdaa5dfd-c6eb-41c6-a67f-44acb1b78b7c' // <-- Map demonstrating bug
}).then(({
  initialViewState,
  mapStyle,
  layers: _layers
}) => {

  const brokenLayer = _layers[0];

  const fixedLayer = brokenLayer.clone({
    id: 'fixed',
    
    // To avoid bug, specify that point layers should not ClipExtension
    // If the layer is using extensions they should be included here instead of `[]`
    _subLayerProps: {
      'points-circle': {extensions: []},
      'points-icon': {extensions: []},
      'points-text': {extensions: []}
    }
  });

  const deckOverlay = new deck.MapboxOverlay({
    interleaved: true,
    layers: [fixedLayer]
    //layers: [brokenLayer] // Uncomment & zoom in/out to show bug
  });
  
  

  const map = new maplibregl.Map({
    container: 'map',
    center: [initialViewState.longitude, initialViewState.latitude],
    zoom: initialViewState.zoom,
    pitch: initialViewState.pitch,
    bearing: initialViewState.bearing,
    style: `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`
  });
  
  map.addControl(deckOverlay);
});