ngx-Mapbox-gl only displaying in half the container

[p-craig-peddie]

I'm trying to get ngx-mapbox-gl to display a map in an angular app, but the map is only displaying in half the div. Have played with multiple settings and html tweaks, but cannot get more than half a map to display. Here is the map.component.html file:
`

 <mgl-map
      [style]="'mapbox://styles/mapbox/streets-v9'"
      [zoom]="9"
     [center]="_center"
      (load)="loadMap($event)"
  >
  </mgl-map> 
</div>

`

and the map.component.scss:

`
@import 'mapbox-gl/dist/mapbox-gl.css';

  .mapboxgl-canvas {
     position: fixed !important;
     height: 100% !important;
  }

`

map.component.ts:

`

  import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from      '@angular/core';
  import { LngLat, Map } from 'mapbox-gl';

 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss'],
 })

 export class DisplayMapComponent implements OnInit, OnChanges {
   map: Map;

   _center: LngLat;

   //refs
   _mapRef: Map;

   @Output()
  centerChange: EventEmitter<LngLat> =  new EventEmitter;

   @Input()
   set zoom(z: number) {
      this._zoom = z;
     if(this.index === 0) {
        this.zoomChange.emit(this._zoom);
     }
   }
   @Output()
   zoomChange : EventEmitter<number> = new EventEmitter;
   _zoom: number;

   @Input()
   index: number;

   constructor() { }

   ngOnInit() {
      this.zoom = 11;
      this._center = new LngLat( -121.31209, 37.449904  );
      console.log('this._center: ', this._center);
   }

   ngOnChanges(changes) {
       console.log('changes: ', changes);
       if (!changes) {
          return;
       }

   }

   loadMap( map: Map) {
     console.log("Initializing map, _center: ", this._center);
     console.log("map: ", map);
     this._mapRef = map;
     console.log("Loading map data");
     this._center = map.getCenter();
     console.log('this._center from map: ', this._center);
   }

}`

app.module.ts:

`

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { LocalStorageService } from './services/local-storage.service';
  import { MatToolbarModule, MatMenuModule, MatIconModule, MatListModule,        MatGridListModule, MatButtonModule, MatCardModule } from '@angular/material'; 
  import { MatSidenavModule } from '@angular/material/sidenav';
  import { FlexLayoutModule } from '@angular/flex-layout';
  import { StorageServiceModule } from 'angular-webstorage-service';

  //mapbox imports
   import { NgxMapboxGLModule } from 'ngx-mapbox-gl';

  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './components/header/header.component';
  import { DisplayMapComponent } from './components/map/map.component';
   import { NavbarComponent } from './components/navbar/navbar.component';
  import { LayoutModule } from '@angular/cdk/layout';
  import { SettingsContainerComponent } from './components/settings-    container/settings-container.component';

  @NgModule({
     declarations: [
      AppComponent,
      HeaderComponent,
      DisplayMapComponent,
      NavbarComponent,
      SettingsContainerComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
      MatToolbarModule,
      MatSidenavModule,
      MatMenuModule,
      MatButtonModule,
      MatIconModule,
      FlexLayoutModule,
      LayoutModule,
      MatListModule,
      StorageServiceModule,
      NgxMapboxGLModule.withConfig({
        accessToken: '<token>', 
      }),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

`

Here's a screenshot of what I'm seeing:

If I remove the map,the border of the div it taking the entire window as it should. But I can't get the map to use up the entire window. Is it css or html or ts I'm doing wrong?

Thanks....

[vasudev13]

Hey @p-craig-peddie
I tried setting the css style property directly on the mgl-map (as opposed to container div) component like

<div class="map-container">
  <mgl-map [style]="'mapbox://styles/mapbox/streets-v10'" [zoom]="[9]" [center]="[77.2167, 28.6315]" style="height: 100%;">
  </mgl-map>
</div>

seemed to work for me, only a workaround though. However could be an issue when trying to do the same with an external css over mgl-map
Thanks and hope this helps you.

[abal0011]

I know this can be a little late but when I faced the same problem, I did a little bit of reading and research to find out that the map when displayed through bootstrap Modal, angular, etc. shows default 400px width and will not take the previous container's width as it is not aware of it and hence its a good practice to use map.resize() method inside the map.on('load',function(){}) in the end of it.
While using bootstrap modal
map.on('load', function() {
// some code before the resize option
$('#myModal').on('shown.bs.modal', function() {
map.resize();
});
}
where my #myModal is the id of the Div that contains my bootstrap modal.
Hope this helps someone who is struggling with the same issue.

[wilmervanheerde]

Thanks, fixed it by listening to load event and calling map.resize()

component.html

<mgl-map (load)="onMapLoad($event)"></mgl-map>

component.ts

onMapLoad(map) {
    this.map.resize()
}

[ghost]

I have the same problem. I tried to use your

<mgl-map (load)="onMapLoad($event)">

and then

onMapLoad(map) {
this.map.resize();
}

but my console says: Cannot read property 'resize' of undefined.
I think I dont really know how to connect the map in .ts and the one in html.

[dmytro-gokun]

@ZdenekPoznerJr That's because you are resizing 'this.map' (which is probably not initialized by that moment). Use parameter 'map' instead: map.resize();

[albuquerquefabio]

I have the same problem. I tried to use your

<mgl-map (load)="onMapLoad($event)">

and then

onMapLoad(map) {
this.map.resize();
}

but my console says: Cannot read property 'resize' of undefined.
I think I dont really know how to connect the map in .ts and the one in html.

work great

[jerodfritz]

Thanks, fixed it by listening to load event and calling map.resize()

component.html

<mgl-map (load)="onMapLoad($event)"></mgl-map>

component.ts

onMapLoad(map) {
    this.map.resize()
}

Event handler should be:

onMapLoad(map) {
map.resize();
}