How to prevent deck gl layers from occupying entire viewport?

Question

I have a DeckGL component I'm eclosing it in a div tag and giving it size, but the deckGL layer seems to occupy the entire viewport. here is a snippet of my code.

const INITIAL_VIEW_STATE = {
    longitude: 83.32247972488423,
    latitude: 17.714023254029464,
    zoom: 10,
    pitch: 0,
    bearing: 0
}

<div class="my-container"> 
 <DeckGL initialViewState={INITIAL_VIEW_STATE} layer={layer} controller>
   // here I'm putting a static map
 </DeckGL>
</div> 

How to render deck gl component in a specific div with a given size.

Answer 1

You need to add a dimension to your deck.gl container, in your example 'my-container'. Add height, width and position. Switch height and width values according to your need, but leave position with value 'relative'. In this way you can size DeckGL component and it can render fully inside your container.

Bonus: it is also responsive.

<div class"my-container" style={{ height: '50vh', width: '50vw', position: 'relative' }}
    <DeckGL>
        ...
    </DeckGL>
</div>