0

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:

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

esto denota que el mapa si esta ocupando todo el contenedor pero no se renderiza correctamente.

Cualquier ayuda es bienvenida.

1 respuesta 1

0

Tras varias horas de investigación, pruebas y errores he conseguido que funcione correctamente, simplemente hay que sustituir la llamada al mapa que hago en el ngOnit por lo siguiente:

  ionViewDidEnter() {
    this.buildMap();
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.