Mapbox-gl height 100%

Question

Mapbox doesn't fit to it's container. whay not?

This is the rendered html:

<div class="map mapboxgl-map" id="mapBox">
  <div class="mapboxgl-canvas-container">
    <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277">
    </canvas>
  </div>
</div>

those 277px are the default I guess.

this is the js:

mapboxgl.accessToken = 'blabla';
  var map = new mapboxgl.Map({
    container: 'mapBox',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-77.04, 38.907],
    zoom: 11.15
  });

this is the scss:

.map {
  grid-column: 1/-1;
  height: 100%;
  position: relative;
  canvas, .mapboxgl-canvas {
    height: 100%;
  }
}

If I add the ever so famous !important to the height: 100%; then it works but the map is stretched.

How do I have to do this?

Answer 1

I found the trick.

just add

map.on('load', function () {
    map.resize();
});

to the js so the map will resize to it's container

Answer 2

This one worked for me. It takes a while before it takes effect but its worth it.

map.on('load', function() {
    $('.mapboxgl-canvas').css('width', '100%');
    $('.mapboxgl-canvas').css('height', '100%');
    map.resize();
});