update with parameters

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/[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

// Simulate externally driven layer updates
setInterval(() => {
  const newLayer = mvtLayer.clone({
    // parameters: {depthTest: true}, // <-- Comment out and observe console
    coordinateOrigin: [0, 0, 0], // No issue
    opacity: 1 // No issue
  });

  deckgl.setProps({layers: [newLayer]})
}, 1000);

class TestMVTLayer extends deck.MVTLayer {
  updateState({props, oldProps, context, changeFlags}) {
    console.log(changeFlags.propsChanged);
    super.updateState({props, oldProps, context, changeFlags});
  }
}

const mvtLayer = new TestMVTLayer({
  id: 'power-lines',
  data: 'https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt',
  getLineColor: [83, 135, 185, 180],
  filled: false,
  stroked: true,
  lineWidthMinPixels: 1,
});

const initialViewState = {latitude: 0, longitude: -50, zoom: 1};

const deckgl = new deck.DeckGL({
  container: 'map',
  controller: true,
  initialViewState,
  layers: [mvtLayer]
});