Ionic 4 - Mapbox display issue

#1

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!

#2

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

#3

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

#4

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

remember install: npm install mapbox-gl --save
and import in your index.htm: <link href=‘https://api.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css’ rel=‘stylesheet’ />

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

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


I hope it works for them

1 Like
#5

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!.