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.
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%;
}
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());
}
}
