Is it possible to control which layers are in front on deck.gl?

user_14739472 0
Viewed 628

On Leaflet, when I create a layer from a GeoJSON, I have a way of controlling which layer is shown in front of the map by looping the layer features and then using a function like feature.bringToFront(). The result is like the following:

enter image description here

On deck.gl however, after creating my layers from a GeoJSON, it's hard to tell which layer is in front of the map... The following image is the same example made with deck.gl instead of Leaflet.

enter image description here

So, is there any way of controlling the feature that I want to show in front with deck.gl? I know I could change the elevation when the view of the map is from above, but in this case, it's not a good solution when I'm navigating through the 3D map. Is it possible to do on deck.gl? Can I force some specific feature to appear in front of others? Is there any parameter or function that controls that?

deck.gl
1 Answers

Have been working on this for a few hours and from a leafletJs background.

The closest I've gotten to a feature.bringToFront equivalent is that you can order the layers and pass that to the DeckGl component, a description from the deck.gl documentation is here:

https://deck.gl/docs/developer-guide/using-layers#rendering-layers

The below works for me, however, it seems to work only for layers of the same type. In the example below, if I add a LineLayer type at index 0 of the layers array below, it will render in front of the two SolidPolygonLayer's below.

const layers = [
      new SolidPolygonLayer({
      id: 'at array index 0 and appears in the background',
      data: helper.getPolygonData(),
      getPolygon: d => d.coordinates,
      getFillColor: d => [255, 0, 0],
      filled: true,
    }),
    new SolidPolygonLayer({
      id: 'at array index 1 and appears in the foreground',
      data: helper.getPolygonData(),
      getPolygon: d => d.coordinates,
      getFillColor: d => d.color,
      filled: true,
    }),
  ];
  
  return (
    <DeckGL
      layers={layers}
      viewState={getViewState()}
      onViewStateChange={e => setViewState(e.viewState)}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      getTooltip={getTooltip}
    >
    ...
    </DeckGL>
  );

user_135898170
Related