Can't display mapbox-gl map in angular 7 app

Question

Building my first angular app, and want to use mapbox-gl to display vector maps. App will be displaying tracking information on top of this map with data coming from gps devices. I was planning on having the map as its own component, then creating services that would plot tracking data from selected devices on the map. However, I'm struggling to get the map displayed. I'm trying to pass the map center from the map.component.ts intialization (which will eventually come from preferences) to the map.component.html but it is not working. As far as I can tell after a few hours of searching and trying different things, I'm passing the value correctly, but no map is shown. Here is the map.component.ts file:

import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';

import { LngLat, Map } from 'mapbox-gl';
import { LCONTAINER_LENGTH } from '@angular/core/src/render3/interfaces/container';

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

export class MapComponent implements OnInit, OnChanges {

  _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);

  }

  onDragZoom(e) {
    var thisMap;
    if (!this._mapRef) {
      console.warn("getFlow was called but no map is set");
      return;
    } else {
      thisMap = this._mapRef;
    }
    if(this.index === 0) {
      this._center = thisMap.getCenter();
      this.zoom = thisMap.getZoom();
    }
  }

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

  }
}

and here is the map.component.html file:

<p>below should be the map</p>
<div class="container" style="border: 1px ">
    <mgl-map
    [style]="'mapbox://styles/mapbox/streets-v9'"
    [zoom]="[9]"
    [center]="_center"
    (load)="map = $event">
    </mgl-map>
</div>
<p>map should be above</p>

And just for good measure, the app.module.ts and app.module.html:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';

@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxMapboxGLModule.withConfig({
      accessToken: '<token>', 
    }),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN.......==">
</div>
<app-map></app-map>
<router-outlet></router-outlet>

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

I'm sure I'm missing some fundamentally simple concept, but I've been banging my head against the wall for a few hours now. Can anyone point me in the right direction?

Thanks!

Answer 1

Try setting the map style in the css

mgl-map {
    height: 100%;
    width: 100%;
  }