Deck.gl: Avoiding position:absolute?

[maxkrieger]

Apologies if I am not reading the docs close enough. With React, I want to put a <StaticMap> (from react-map-gl) beneath a LineLayer, and contain the <DeckGL> element in a css grid parent column. It looks like position:absolute is automatically applied to the children of <DeckGL>, however. How do I integrate the <DeckGL> elements into my existing layout? Do I have to compute the x,y,width,height myself?

To Do List

• [ ] Add label and assign to milestone
• [ ] Coding
• [ ] Test

[maxkrieger]

Resolved it myself, really stupid mistake. Just had to make the container of <DeckGL> have position: relative;.

[adriangabardo]

@maxkrieger Could you maybe share the code? I can't seem to set position: relative on it

[maxkrieger]

@adriangabardo set a container, not the DeckGL element itself, to position relative.

[adriangabardo]

Literally just figured that out ahahha
But thanks for the reply :)
Here is the code for future reference:
<div style={{position:"relative"}}> <DeckGL {...this.state.viewport} initialViewState={initialViewState} controller={true} layers={layers} > <MapGL {...this.state.viewport} mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} /> </DeckGL> </div>

[aaronsamkennedy]

I tried to do this in our app and it only by changing the positioning to relative in the wrapping div it seems to be breaking our map and resulting in the warning: luma: Device pixel ratio clamped. When we add the wrapper style the deck component seems to break, a map shows up but with no controls, no viewport and not added layers.

The map works perfectly without it. Any idea why this might cause the deck component to break?

<div style={{position:'relative'}}> 
      <DeckGL
        layers={renderLayers({ 
          data: getRuns(geo),
          selected:props.selection,
          onHover: hover => _onHover(hover)})}
        getCursor={() => hover.hoveredObject ? 'pointer' : 'default'} 
        initialViewState={INITIAL_VIEW_STATE}
        controller={true}
        onClick={(click) => _onClick(click)}
      >
        <StaticMap 
          mapboxApiAccessToken={MAPBOX_TOKEN}
          mapStyle={MAPBOX_STYLE} />
      </DeckGL>
    </div>