Deck.gl without React but with webpack is not rendered the specified container

Question

The JS file looks like this

import { Deck } from '@deck.gl/core';
const HTMLcontainer = document.getElementById('test');
const deck = new Deck({
    container: HTMLcontainer,
    // ... etc
});

Then I am using pug for the HTML engine

body
        h1 deck.gl
        div#test(class='test')

The viz is getting rendered properly, but not within the <div id='test'></div> but always in the body.

Does someone know if this is possible when importing deck.gl via webpack but not using React? Or is there something else wrong?

Answer 1

Found the solution.

The layers are not placed in a container, but in the canvas. The container property is reserved for the map.

The difference is this line

canvas: 'deckgl',

Complete solution: slighly different HTML (Pug)

div#viz
    canvas#deckgl

Some CSS

#viz {
  width: 70vh;
  height: 70vw;
  border: 1px solid slategray;
  overflow: hidden;
  position: relative;
}

The position is important, because the canvas is has position: absolute

And finally the JS

const HTMLcontainer = document.getElementById('viz');
const w = HTMLcontainer.offsetWidth;
const h = HTMLcontainer.offsetHeight;

const deck = new Deck({
    canvas: 'deckgl',
    width: w,
    height: h,
    // etc ...
});

Now deck.gl is rendering the specified canvas that I can place where I want.