Deck.gl (Mapbox) StaticMap doesn't resize - overwrites everything on the screen

Question

I am trying to add a basic deck.gl (mapbox static map) to a react project - which I can do; however, once the map is loaded it takes up the entire page and any other information is hidden behind the map. For example, I have some text in a <p> above the map and it gets hidden behind the map, when it should show just above it.

Any attempt to resize the div that the map sits in has been unsuccessful: margin-top, height etc..

The class is called DglMap

class DglMap extends Component {
  render() {
    const layers = [];
    return (
      <div className="dglMapStyle">
        <DeckGL
          initialViewState={initialViewState}
          controller={true}
          layers={layers}
        >
          <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
        </DeckGL>
      </div>
    );
  }
}

added to a class called Content

class Content extends Component {
  state = {};
  render() {
    return (
      <div>
        <BaseMap />
      </div>
    );
  }
}

added to app.js

function App() {
  return (
    <Router>
      <div>
        <SomeText />
        <Route exact path="/" component={MainContent} />
      </div>
    </Router>
  );
}
export default App;

The file SomeText returns <div><p>SomeText</p></div>

The expected result is for the map to show underneath the text and not show on top of it. In another case I may want to resize the map to a specific size; for example 500x500px.

Any help appreciated and happy to elaborate. Cheers!

Answer 1

In the part of Deck.Gl where the width and the height of the canvas is set, there seems to be this code:

    if (width || width === 0) {
      width = Number.isFinite(width) ? `${width}px` : width;
      this.canvas.style.width = width;
    }

    if (height || height === 0) {
      height = Number.isFinite(height) ? `${height}px` : height;
      this.canvas.style.position = 'absolute';
      this.canvas.style.height = height;
    }

which adds absolute positioning regardless of width and height, which might cause some fo your problems. Try adding left and top css styles to move the canvas. Resizing of the canvas should however work without any problems, see snippet below that works.

<DeckGL width={width} height={height}></DeckGL>