0

tengo el siguiente problema : ocupo una modal la cual dentro de su body estoy haciendo un display de un div con mapa el div tiene los estilos : height: 500px ; width:100% , pero al momento de abrir la modal no ocupa dichas dimensiones, necesito cubrir el background azul con todo el mapa

introducir la descripción de la imagen aquí

mi codigo HTML :

<div id="mapa-mapbox"></div>

mi TS :

(Mapboxgl as any).accessToken = environment.mapboxKey this.mapa = new Mapboxgl.Map({ container: 'mapa-mapbox', style: 'mapbox://styles/mapbox/streets-v11', center: [-74.0782322,4.5981206], // LNG-LAT zoom: 17,

mi CSS :

    `#mapa-mapbox{
  width: 100%;
  height: 500px;
  background-color: #007bff;
}`
2
  • Si pones height: 100%, hay cambio?
    – Legna
    el 22 may. 2020 a las 18:21
  • no , no genera cambios , estuve inspeccionando el elemento del mapa y me di cuentael mapa esta dentro de un canvas que genera la api automáticamente con esas dimensiones que generan el mapa pequeño y no consigo forma de modificar ese canvas el 23 may. 2020 a las 19:22

2 respuestas 2

0

Seguramente lo que sucede es que se esta intentando cargar el mapa antes que su contenedor en el HTML. Esto causa que el mapa se establezca con su tamaño predeterminado que es de 400x300

asegurate de inicializar el mapa luego de que su contenedor se halla cargado.

inicializa tu mapa dentro de ngOnInit o dentro de ngAfterViewInit.No se como estas usando tu modal, ya sea con materialAngular o a tu manera.

no tengo suficiente puntuación para hacer un comentario.

espero te sea de ayuda

0

yo lo resolvi asi

setTimeout( 
               function(){
               
             map.resize();
               }
               ,3000);

en la funcion donde ejecuta el modal

Tu Respuesta

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

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