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);