Ionic 4 - Mapbox display issue

Ionic Framework
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>

2
2.png1513×601 165 KB
1
1.png1381×616 163 KB

Thanks in advance!

1 Like
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

Captura%20de%20pantalla%20de%202019-01-27%2017-43-51
Captura de pantalla de 2019-01-27 17-43-51.png1366×768 121 KB

Captura%20de%20pantalla%20de%202019-01-27%2017-48-16
Captura de pantalla de 2019-01-27 17-48-16.png1366×768 90.2 KB

Captura%20de%20pantalla%20de%202019-01-27%2017-44-48
Captura de pantalla de 2019-01-27 17-44-48.png1366×768 239 KB

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

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

6

Hello @germandap, I am using ionic 4 too. I kind of have the problem, that my map is simply black. Did you have a simmilar error? I am using mapbox web, so all I did was following the instructions (adding the and reference into the index.html file + adding the <div id=“map” … and another into my html page).

Would be nice to hear from you :slight_smile:

7

I have @rafaelestermann2000 same problem, I’m using ionic 4 with angular 8 and it doesn’t work. Is the example available on github? Is anything changed with angular version? I published the ionic project (not yet working) on github.

8

I fixed, if you still need help

9

Hey there. How did you fix it? I am trying to display the map in a container, under the description of the page, but it wont display anything.

10

could you share your code please?