Deck.gl 3D Hexagon Layer is Rendering as 2D Chart Despite Correct Configuration

[Bindu-yadav8]

I'm experiencing an issue with the Deck.gl 3D Hexagon Layer in Apache Superset. The map visualization is being rendered as a 2D flat map instead of 3D, despite making the necessary configuration changes. Here are the details:

Issue Details:
Superset Version: Superset 2.1.3
Deck.gl Layer: 3D Hexagon Layer
Map Style: Mapbox

Steps to Reproduce:
Set up a Deck.gl 3D Hexagon Layer in Superset.
In the chart configuration, enable the following:
Extruded: True
Elevation Scale: > 0 (e.g., 50)
Verified that a valid Mapbox API token is provided.
Ensured data contains proper lat/lon fields and elevation-related metrics.
Saved the configuration and refreshed the dashboard.

Expected Behavior:
The map should render in 3D with the hexagons extruded according to the elevation values in the dataset.

Actual Behavior:
The map is displayed as a 2D flat chart, with no 3D effects visible.

Troubleshooting Steps Already Taken:
Checked that the Mapbox token is correct.
Confirmed WebGL is supported and enabled in the browser.
Validated all Deck.gl layer settings (extruded: true, elevation scale, and color schemes).
Increased the zoom level to check if 3D effects appear.
Restarted Superset and reloaded the page multiple times.

Environment:
Browser: Google Chrome
Operating System: Windows

[dosubot]

Hey @Bindu-yadav8! I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this issue together!

The Deck.gl 3D Hexagon Layer might be rendering as a 2D chart because the extruded property in the HexagonLayer configuration might not be set correctly or could be overridden by another setting. Here are a few things to check:

1. Ensure extruded is set to true in the configuration:
   Make sure that the extruded property is explicitly set to true in your HexagonLayer configuration. Here is an example:

   return new HexagonLayer({
     id: `hex-layer-${fd.slice_id}`,
     data,
     radius: fd.grid_size,
     extruded: true, // Ensure this is set to true for 3D rendering
     colorRange,
     outline: false,
     getElevationValue: aggFunc,
     getColorValue: aggFunc,
     ...commonLayerProps(fd, setTooltip, setTooltipContent),
   });

2. Check the Superset UI settings:
   The extruded property can be toggled on or off through the Superset UI. Ensure that the "Extruded" checkbox is checked in the control panel under the "Map" section:

   export const extruded = {
     name: 'extruded',
     config: {
       type: 'CheckboxControl',
       label: t('Extruded'),
       renderTrigger: true,
       default: true,
       description: t('Whether to make the grid 3D'),
     },
   };

3. Verify other related settings:
   Ensure that other related settings, such as elevationScale, are set correctly and that your data contains the necessary elevation metrics.

4. Browser and WebGL support:
   Since you've already confirmed that WebGL is supported and enabled in your browser, this should not be an issue. However, double-check that there are no browser-specific limitations affecting the rendering.

By verifying these settings, you should be able to ensure that the 3D Hexagon Layer renders correctly in 3D. If the issue persists, there might be other underlying factors that need to be investigated further ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.