Create heatmap from MVTLayer

[henriktorget]

I have a xyz tile that i serve up. And i want to visualize it with deck-gl.
MVTLayer seems to work.

new MVTLayer({
        data: 'https://tiles.com/{z}/{x}/{y}.vector.pbf',
        getFillColor: d => {
          const co2 = d.properties.co2
          if (co2 < 1761846) return [44, 123, 182]
          if (co2 > 1761846 && co2 < 5024978) return [146, 198, 223]
          if (co2 > 5024978 && co2 < 14202126) return [221, 240, 208]
          if (co2 > 14202126 && co2 < 39742722) return [254, 223, 153]
          if (co2 > 39742722 && co2 > 182897132) return [245, 144, 83]
          if (co2 > 182897132) return [215, 25, 28]
          return [215, 25, 28]
        },
        visible: true,
      }),

But i would like to use a heatmaplayer to show data density.
These are points of data.

But the other layers from deck does not accept xyz tiles as a data source, only geoJSON.
Any way to have them read tiles?

Want to do something like this:

new HeatmapLayer({
        id: "heatmapLayer",
        data,
        intensity: zoom < 5 ? 0.005 : 0.05,
        threshold: zoom < 5 ? 0.0001 : 0.001,
        colorRange,
        visible: zoom > 7 ? false : true,
        getPosition: d => d.geometry.coordinates,
        getWeight: d => d.properties.value.count,
        aggregation: "SUM",
      }),

Thanks :)

[Pessimistress]

HeatmapLayer does not work cross tile borders. You can create one TileLayer and one HeatmapLayer, and in the TileLayer's onViewportLoad update the HeatmapLayer's data.

Some debounce may be required to throttle frequent updates.