Mapbox doesn't display full until I put full screen or open developer tools

Ionic Framework
1

I am using a mapbox api to generate a map. I’m trying to make width and height equal to 100%, but the class mapboxgl-canvas has a default value when start it’s 300px for witdth and 400px for height.

2
21920×1080 146 KB

But when I give full screen or developer tools it is placed with the css styles that I defined which are these

#map {

    width: 100%;

    height: 100%;

  }

3
31920×1080 625 KB

This is my tab2.page

<ion-header>

  <ion-toolbar>

    <ion-title>

      Tab 2

    </ion-title>

  </ion-toolbar>

</ion-header>

<ion-content>

  <div id="map"></div>

 </ion-content>

And my TypeScript file


import { Component, OnInit } from '@angular/core';

import { environment } from '../../environments/environment.prod';

import * as Mapboxgl from 'mapbox-gl';

@Component({

  selector: 'app-tab2',

  templateUrl: 'tab2.page.html',

  styleUrls: ['tab2.page.scss']

})

export class Tab2Page implements OnInit{

  constructor() {}

  title = 'view';

  map: Mapboxgl.Map;

  ngOnInit(){

    (Mapboxgl as any).accessToken = environment.mapboxKey;

    this.map = new Mapboxgl.Map({

    container: 'map', // container id

    style: 'mapbox://styles/mapbox/outdoors-v11',

    center: [-74.810913,10.985246], // LNG, LAT

    zoom: 14 // starting zoom

    });

     

    // Add zoom and rotation controls to the map.

    this.map.addControl(new Mapboxgl.NavigationControl());



  }

}
2

in scss write this:

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

#map-container {
    height: 100vh;
    width: auto;
}

in HTML:

<div id="map-container">

  <div id="map"></div>

</div>

image
image1240×448 35 KB