[Bug] Heatmap layer data points cover entire map when `interleaved: true` and google VECTOR map

[puopg]

Description

(Update) Turns out I can repro on desktop chrome testing more...

When using the heatmap layer with VECTOR based google map, the entire screen gets covered by the heatmap regardless of settings to radius, etc. RASTER based google map also is fine I believe.

• Setting interleaved: false to the Deck config seems to resolve this issue, but then the heatmap is rendered above map controls and other things like markers.

Video showing the layering on top of map controls:

https://user-images.githubusercontent.com/7741481/172528659-365e1e6a-f1f2-444b-b82c-3e12756b9875.mov

Video showing default behavior, most intense color seems to cover entire screen.

https://user-images.githubusercontent.com/7741481/172528673-a0f4e551-2348-4f20-a9dd-dfa4af7f7615.mov

Flavors

• [X] React
• [ ] Python/Jupyter notebook
• [ ] MapboxLayer
• [X] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

Ideally would expect data points on the heatmap to render as expected, honoring radius and stuff. Pretty much the interleaved: false result in the video above, but without the layering problems.

Steps to Reproduce

Similar to another bug I reported, the setup can be done as follows:

import { GoogleMap, LoadScriptNext } from "@react-google-maps/api";
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

const mapIdToUse = "INSERT_VECTOR_MAP_ID_HERE";

<LoadScriptNext
       googleMapsApiKey="INSERT_API_KEY"
       mapIds={[mapIdToUse]}
       libraries={[]}
       version="quarterly"
>
      <GoogleMap
         options={{ mapId: mapIdToUse }
         onLoad={(map) => { this.setState({ googleMapInstance: map }}
         onIdle={() => { this.setState({ mapReady: true }); this.attachDeckOverlay(this.state.googleMapInstance) }}
      />
</LoadScriptNext>

Then:

attachDeckOverlay = (mapInstance) => {
  const deckOverlay = new GoogleMapsOverlay();
  deckOverlay.setMap(mapInstance);
}

And then render a component like:

import { HeatmapLayer } from "@deck.gl/aggregation-layers";

const data = [{ location: { lat: 0, lng: 0 }, weight: 10 }];

const HeatmapExampleLayer: FunctionComponent<Props> = (props: { overlay: google.maps.Overlay }) => {
  const heatmapLayer = new HeatmapLayer({
    id: "heatmap-example",
    data: data,
    getPosition: (d) => [d.location.lng, d.location.lat],
    getWeight: (d) => d.weight,
    radiusPixels: 30,
  });

  props.overlay.setProps({ layers: [heatmapLayer] });

  return null;
};

Environment

• Framework version: deck.gl@8.7.11
• Browser: Safari for iOS 15.5 and Chrome Desktop
• OS: iOS 15.5 and Chrome Desktop
• Google map React api library: "@react-google-maps/api": "^2.8.1",

Logs

No response

[felixpalmer]

I've done some research and the first commit where this is an issue is https://github.com/visgl/deck.gl/commit/6febcc5bac47c0d3802512321ea0ca7b0b7b6bb4

The issue can be reproduced by adding a HeatmapLayer to examples/get-started/pure-js/google-maps/app.js

[Pessimistress]

Fix landed in 8.7.12

[YonatanHanan]

I think I get the same issue with version 8.8.22 using mapbox, the flash problem It happens for one second and then disappers