[Bug] Heatmap Layer Doesn't Render in v9 Update from v8.

[zrichardet]

Description

Updating to the most recent version of deck.gl and I am having issues with the Heatmap Layer not rendering as expected. I also use a Hex Layer and an MVT Layer without issues and my last hurdle is to get the Heatmap to appear on the screen.

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

Heatmap layer renders as expected.

Steps to Reproduce

new HeatmapLayer({
        id: 'layer-id',
        data: [{position: [number, number], ...],
        opacity: 0.4,
        getPosition: (d) => d.position,
        colorRange: [
          [255, 255, 178],
          [254, 217, 118],
          [254, 178, 76],
          [253, 141, 60],
          [240, 59, 32],
          [189, 0, 38],
        ],
      })

Environment

• Framework version: 9.0.19
• Browser: Chrome 126.0.6478.61
• OS: Sonoma 14.5
• react-map-gl: 7.1.7

Logs

update of HeatmapLayer({id: 'layer-id'}): Cannot read properties of null (reading 'glTarget') TypeError: Cannot read properties of null (reading 'glTarget')

[kylebarron]

I hit this same bug in the above issue updating lonboard to use deck.gl v9. I can create an Arrow-based example but it looks like the OP's example is much more minimal to reproduce the same error

[Pessimistress]

Does the example on https://deck.gl/docs/api-reference/aggregation-layers/heatmap-layer work for you?

[kylebarron]

That example does work for me. I don't immediately see what's different in that example.

I am passing in data via binary accessors, if that makes a difference.

[zrichardet]

Same. I can get the example in the documentation to work but once I change back to my original code I got back to receiving the webGL error in the OP.

[Pessimistress]

@zrichardet Same.

The "steps to reproduce" that you provided in the bug report is not substantially different from the example in the docs. I do not have access to your "original code." Please help us to help you if you need this fixed.

[zrichardet]

@Pessimistress https://codesandbox.io/p/sandbox/heatmap-issue-4d85gt There's a link to codesandbox that i set up to recreate the issue.

[Pessimistress]

Fix published in 9.0.23

[kylebarron]

I'm getting the same error in 9.0.23 😔 . I'll try to create a minimal example with this data.

[kylebarron]

In https://codesandbox.io/p/devbox/heatmap-issue-forked-rr943l?workspaceId=a29bcda6-9441-45b7-a846-4b8ec115d594 I forked @zrichardet 's above codesandbox link and updated to deck.gl v9.0.27, but I'm still getting the same error as before:

Edit: should I create a new issue for this?

[ibgreen]

FWIW, I see it working on master (9.1-alpha) e.g. in the layer-browser example. Hopefully we will get 9.1 out soon.

[kylebarron]

The docs page works in my browser (https://deck.gl/docs/api-reference/aggregation-layers/heatmap-layer), so I figure it's not entirely broken, but that there's some specific combination of props that isn't supported correctly.

I'll keep my eye out for a 9.1 alpha release to NPM, and then I'll try the codesandbox with that release

[ibgreen]

There is a luma91 branch in deck, but it still has a few subtle test failures, will land and publish an alpha as soon as it runs clean.