How to render multiple deck.gl layers at once?

[Lyonford]

Hello!

I'm trying to visualize multiple data sets on top of Esri basemaps using deck.gl. The issue is that the two ways I have tried to plot all of my data either allow me to see all the data in one layer or separate the layers out and see only one data set at a time. Can't I have both? See all the data and have them as separate items in the layerList?

Pseudo code of each case: (all in one deck layer, then separate)

// All in one deck layer
    const deckLayer = new DeckLayer({
      'title': "Two data sets",
      'deck.layers': [
        new ScatterplotLayer({
          id: 'Points',
          data: pointData,
          getPosition: d => [d.x_longitude, d.y_latitude],
          getFillColor: [255, 255, 255],
          radiusMinPixels: 7,
          radiusMaxPixels: 21,
          autoHighlight: true,
          pickable: true,
          extensions: [new CollisionFilterExtension()],
        }),
        new HeatmapLayer({
          id: 'Heat',
          data: heatData,
          aggregation: 'SUM',
          getPosition: d => [d.Longitude_deg, d.Latitude_deg],
          colorRange: [[46,172,102],[126,188,87],[179,205,65],[223,221,25],[255,237,0]]
        })
      ]
    });
    map.add(deckLayer);

// Separate deck layers
    const pointLayer= new DeckLayer({
      'title': "Points",
      'deck.layers': [
        new ScatterplotLayer({
          id: 'Points',
          data: pointData,
          getPosition: d => [d.x_longitude, d.y_latitude],
          getFillColor: [255, 255, 255],
          radiusMinPixels: 7,
          radiusMaxPixels: 21,
          autoHighlight: true,
          pickable: true,
          extensions: [new CollisionFilterExtension()],
        })
      ]
    });
    map.add(pointLayer);

    const heatLayer = new DeckLayer({
      'title': "Heat Data",
      'deck.layers': [
        new HeatmapLayer({
          id: 'Heat',
          data: heatData,
          aggregation: 'SUM',
          getPosition: d => [d.Longitude_deg, d.Latitude_deg],
          colorRange: [[46,172,102],[126,188,87],[179,205,65],[223,221,25],[255,237,0]]
        })
      ]
    })
    map.add(heatLayer);

[ToddRunstein]

Did you ever figure out why this is happening? I'm running into the same thing and wondering if I'm doomed to live with a single DeckLayer, or if it's possible to use more than one at a time. Let me know if you've solved this (thanks in advance)!

[Lyonford]

We got around this!
Apologies for the late reply, but it has been a while since I worked on that bit of code. I'll amend this response with more details later. In summary we created dummy layers to go in the layer list, created a 'catalog' of the component layers that we added or subtracted layers based upon the selections in the layer list (via listening to the layer list), and there was a separate useEffect() that would destroy the DeckLayer and redraw it based on the catalog.
Why I say I'll need to review before sharing is that I don't recall whether the dummy layers ended up being necessary with the destroy/redraw effect among other things. The idea was that the layers you are turning on and off in the list are not real layers, they're just for controlling the components of the DeckLayer (which itself is always on and not listed in the layer list).