Hola y gracias de antemano por la ayuda, en mi ultima pregunta buscaba integrar un mapa en mi aplicación de ionic (bajo angular), me recomendaron mapbox y la verdad es que tiene muy buena pinta, pero me he topado con un problema, el mapa no ocupa todo el espacio del contenedor que le he asignado:
Mi codigo
contenedor del mapa:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Puntos de interes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<div id="mapa-mapbox"></div> <!-- Contenedor del mapa -->
</ion-content>
Estilos del contenedor:
#mapa-mapbox {
width: 100vw;
height: 100vh;
background-color: yellow; // Solo para ver el tamaño
}
component.ts:
import { Component } from '@angular/core';
import * as Mapboxgl from 'mapbox-gl';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
public mapa: Mapboxgl.Map;
constructor() {
}
ngOnInit() {
Mapboxgl.accessToken = environment.mapkey;
this.mapa = new Mapboxgl.Map({
container: 'mapa-mapbox', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position
zoom: 4 // starting zoom
});
this.mapa.addControl(new Mapboxgl.NavigationControl());
}
}
El resultado es el siguiente:
Solución esperada: que el mapa ocupe toda la zona amarilla
EDIT 1:
probando con:
#mapa-mapbox {
width: 100%;
height: 100%;
background-color: yellow; // Solo para ver el tamaño
}
consigo lo siguiente:
esto denota que el mapa si esta ocupando todo el contenedor pero no se renderiza correctamente.
Cualquier ayuda es bienvenida.