How to display multiple layers with Deck.gl

Question

I am trying to make an interactive chart using Deck.gl that combines a HexagonLayer (for population data) with an IconLayer (for locations of a retail chain).

The deck.gl documentation indicates that it is possible to render multiple layers on top of each other:

deck.gl allows you to render multiple layers using the same or different data sets. You simply provide an array of layer instances and deck.gl will render them in order (and handle interactivity when hovering clicking etc).

There is even an example of how the layers object can be initialized:

<DeckGL layers={[
  new PathLayer({data: ...}),
  new LineLayer({data: ...}),
  new ArcLayer({data: ...}),
]} />

But I cannot figure out how to load separate data sources and initialize the two layers, all the examples are written as single layer demos.

Is anybody aware of any examples that actually combine multiple layers?

Answer 1

You can look at the deckgl-overlay file, the one that is used to render the header on the main website demo, which shows an usage using a custom TripsLayer and a PolygonLayer.

The data is encoded for portability, so it's not particularly readable, but I think your problem is that you are trying to use different layers using the same data structures, which is not necessarily compatible.

Here is an example using multiple layers:

const layers = [
  new ArcLayer({
    id: 'arc-layer',
    strokeWidth: 10,
    data: [
      { sourcePosition: [-122.4, 37.7843], targetPosition: [-122.416, 37.781], color: [255, 0, 255] },
    ],
  }),
  new ScatterplotLayer({
    id: 'scatterplot-layer',
    data: [
      { position: [-122.4, 37.78], radius: 5, color: [0, 255, 0] },
    ],
    radiusScale: 100,
  }),
  new LineLayer({
    id: 'line-layer',
    strokeWidth: 10,
    data: [
      { sourcePosition: [-122.43, 37.79], targetPosition: [-122.416, 37.781], color: [255, 0, 0] },
    ],
  }),
]

As you can see, the ArcLayer and LineLayer could use the exact same data object since they have the same form, but a ScatterplotLayer can't do the same. You have to pay attention to the docs of each layers (eg the ArcLayer one), where an example data is shown.

_{Disclaimer: I work for Uber in the Data Visualization team that made deck.gl.}