Ionic 4 - Mapbox display issue


Hi all, I have put a map with mapbox successfully, the problem is that it does not fit well to the screen, however I have seen that applies an extra css in the canavas and if I do a resize of the screen (manually) is perfectly adapted how could there be an override of the css of the canvas?

the default style of canvas on load is

<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="1200" height="900" style="position: absolute; width: 400px; height: 300px;"></canvas>

Thanks in advance!


Hi. Did you resolve this issue. I have the same issue.


No, I use ionic 3 currently, because on ionic 4 I dont found any solution.


hey guys, try this. I’m using Ionic 4.

remember install: npm install mapbox-gl --save
and import in your index.htm: <link href=‘’ rel=‘stylesheet’ />

and the file scss:
.noScroll {
overflow: hidden;

#map {
height: 100%;
width: 100%;

I hope it works for them

1 Like

The key that you found is render the map before the view enter, if you change to OnInit not work.

Thank’s for share is works perfect!.