0

I'm trying to use ngx-mapbox-gl in an angular 7 app for the first time and am experiencing something strange with the map. I want it to take 100% of the window below the navbar. But for some reason it is taking more than the window size. Notice how I lost the attribution and mapbox logo? I would just like the map to fit into the window and that's it. enter image description here

Here is the component html:

<mgl-map
  [style]="mapStyle"
  [zoom]="_zoom"
  [center]="_center"
  (load)="loadMap($event)"
  (zoomEnd)="onZoom($event)"
>
  <mgl-control
      mglScale
      unit="imperial"
      position="top-right">
  </mgl-control>
  <p>some text</p>
</mgl-map>
</mat-card-content>
</mat-card>

and ts:

import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppSettings } from '../../shared/app-settings'
import { AppSettingsService } from '../../services/app-settings.service';

import { LngLat, Map } from 'mapbox-gl';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnChanges {
  private className: string;
  appSettings: AppSettings;
  appSettingsSub: Subscription;
  map: Map;
  mapStyle: string;
  _zoom: number;
  _center: LngLat;

  //refs
  _mapRef: Map;

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

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

  @Input()
  index: number;

  constructor(public appSettingsService: AppSettingsService) { }

  ngOnInit() {
    this.className = this.constructor.toString().match(/\w+/g)[1];
    this._zoom = 6;

    this.appSettingsSub =     this.appSettingsService.behaviorSubject.asObservable().subscribe(value => {
      this.appSettings = value;
      if ( this.appSettings.norCalMapCenter == true ) {
        this._center = new LngLat( -121.31209, 37.449904  );
      }
      else {
        this._center = new LngLat(  -116.363804, 33.749757  );
      }
      if (this.appSettings.theme === 'tracs-dark-theme') {
        this.mapStyle = 'mapbox://styles/mapbox/dark-v9';
      }
      else {
        this.mapStyle = 'mapbox://styles/mapbox/outdoors-v9';
      }
    });

  }
  ngOnChanges(changes) {
    if (!changes) {
      return;
    }
  }
  loadMap( map: Map) {
    this._mapRef = map;
    this._center = map.getCenter();
  }

  onZoom(e) {
    this._zoom = Math.round(this._mapRef.getZoom());
    console.log('zoom event zoom:', this._zoom);
  };
}

and css:

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

Plus, I can't get text to display on top of the map. I have a simple paragraph that I want to display on top of the map, but the text never displays. Is there something that needs to be done with layers or z-levels to display something on top of the map?

2 Answers 2

1

If you put height 100% alone like that it doesn't account for the navbar that you have.

You need to do : height : calc(100% - 100px)

100px is the height of your navbar. Try that solution.

2
  • 1
    That was it! Thanks!
    – cpeddie
    Mar 16, 2019 at 14:52
  • happy to help!!
    – Steven
    Mar 17, 2019 at 3:09
0

To answer your second question about displaying a paragraph on top of your map:

You shouldn't need to adjust the z-index, but make your paragraph position absolute. I've wrapped my map in a parent div. I've set the parent div to fill the available screen minus the height of my top toolbar(s). Then I just set the height and width of my map element both to 100%. Both the map element and paragraph element are children of the parent div. The map will default to position: relative and then by setting the position: absolute on the paragraph you can control exactly where you want it to reside.

map.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { map, switchMap } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { Directions } from 'src/app/shared/models/directions.model';
import { NavigationService } from '../navigation.service';
import { SubSink } from 'subsink';

@Component({
  selector: 'nav-to-taylor-park',
  templateUrl: './nav-to-taylor-park.component.html',
  styleUrls: ['./nav-to-taylor-park.component.scss']
})
export class NavToTaylorParkComponent implements OnInit, OnDestroy {

  private _subs: SubSink = new SubSink();

  isMobile$ = this._bpObserver.observe([Breakpoints.Handset, Breakpoints.TabletPortrait])
    .pipe(map(result => result.matches)
  );

  directions$: Observable<Directions>;

  private _profiles: any[] = [
    { name: 'driving', value: 'driving' },
    { name: 'traffic', value: 'driving-traffic' },
    { name: 'walking', value: 'walking '},
    { name: 'cycling', value: 'cycling' }
  ];

  private _selectedProfile: string = this._profiles[0].value;

  constructor(
    private _bpObserver: BreakpointObserver,
    private _route: ActivatedRoute,
    private _navService: NavigationService
  ) { }

  get profiles() {
    return this._profiles;
  }

  get selectedProfile() {
    return this._selectedProfile;
  }

  set selectedProfile(val: string) {
    this._selectedProfile = val;
  }

  ngOnInit() {
    this.directions$ = this._route.paramMap.pipe(
      switchMap(params => {
        return this._navService.getDrivingDirections(params.get('pts'), this._selectedProfile)
      })
    );

    this._subs.sink = this.directions$.subscribe(dirs => console.log('Dirs in Nav Comp: ', dirs), 
      error => console.log('Error in Directions Subscription', error)
    );

  }

  ngOnDestroy() {
    if (this._subs) this._subs.unsubscribe();
  }

}

map.html

<div [class]="(isMobile$ | async) ? 'jumbotron-fluid mobile mb-0' : 'jumbotron-fluid mb-0'">
  <mgl-map 
    [style]="'mapbox://styles/mapbox/navigation-guidance-day-v2'" 
    [zoom]="[10]"
    [center]="[-106.58305214873641, 38.89357626425448]"
    [pitch]="[45]"
    *ngIf="directions$ | async as nav">
    <mgl-control mglNavigation></mgl-control>
    <mgl-control mglFullscreen></mgl-control>
    <mgl-marker *ngFor="let pt of nav.waypoints"
      [lngLat]="pt.location">
      <div class="marker">{{ pt.name }}</div>
    </mgl-marker>
  </mgl-map>
  <div class="on-map">
    This should be on top of map...
  </div>
</div>

map.scss

<div [class]="(isMobile$ | async) ? 'jumbotron-fluid mobile mb-0' : 'jumbotron-fluid mb-0'">
  <mgl-map 
    [style]="'mapbox://styles/mapbox/navigation-guidance-day-v2'" 
    [zoom]="[10]"
    [center]="[-106.58305214873641, 38.89357626425448]"
    [pitch]="[45]"
    *ngIf="directions$ | async as nav">
    <mgl-control mglNavigation></mgl-control>
    <mgl-control mglFullscreen></mgl-control>
    <mgl-marker *ngFor="let pt of nav.waypoints"
      [lngLat]="pt.location">
      <div class="marker">{{ pt.name }}</div>
    </mgl-marker>
  </mgl-map>
  <div class="on-map">
    This should be on top of map...
  </div>
</div>

screenshot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.