bug: changeing style messes up z-index with other layers

[BernhardRode]

Hey,

when you change the mgl-map style and you have a layer with markers p.e. the markers get lost. I could bet that this is a z-index issue. I will try to find a bugfix.
You can reproduce the issue be adapting the "change a maps style" demo according to this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'mgl-demo',
  template: `
  <mgl-map
    [style]="style"
    [zoom]="[13]"
    [center]="[-71.976080,-13.521338]"
  >
    <mgl-vector-source
      id="museums"
      url="mapbox://mapbox.2opop9hr"
    >
    </mgl-vector-source>

    <mgl-layer
      id="museums"
      type="circle"
      source="museums"
      [paint]="{
        'circle-radius': 8,
        'circle-color': 'rgba(55,148,179,1)'
      }"
      sourceLayer="museum-cusco"
    >
    </mgl-layer>
  </mgl-map>
  <mat-radio-group [ngModel]="layerId" (ngModelChange)="changeStyle($event)">

    <mat-radio-button value="basic">basic</mat-radio-button>
    <mat-radio-button value="streets">streets</mat-radio-button>
    <mat-radio-button value="bright">bright</mat-radio-button>
    <mat-radio-button value="light">light</mat-radio-button>
    <mat-radio-button value="dark">dark</mat-radio-button>
    <mat-radio-button value="satellite">satellite</mat-radio-button>
  </mat-radio-group>
  `,
  styleUrls: ['./examples.css', './set-style.component.css']
})
export class SetStyleComponent implements OnInit {
  layerId = 'basic';
  style: string;

  ngOnInit() {
    this.changeStyle(this.layerId);
  }

  changeStyle(layerId: string) {
    this.style = `mapbox://styles/mapbox/${layerId}-v9`;
  }
}

[rdndnl]

Hi,
I'm not sure this bug is related to z-index, maybe it is caused by the fact Mapbox Style is the root component and adding Layers/Sources to MapboxMap will add them to the loaded style. If you load a new style, you will have to recreate your layers and sources and add them again.

Markers and other layers added at runtime become part of the style object, and setStyle diffs the old and new style, so markers/other custom layers not present in the "new" style will be removed; you'll need to preserve the markers and re-add them to the modified map (see here, and here for discussion).

As a workaround in my project I'm using a boolean variable (mapIsLoading) to temporary remove <mgl-vector-source> and <mgl-layer> elements while a style change is in progress.

Example:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'mgl-demo',
  template: `
  <mgl-map
    [style]="style"
    [zoom]="[13]"
    [center]="[-71.976080,-13.521338]"
  >
    <mgl-vector-source *ngIf="!mapIsLoading"
      id="museums"
      url="mapbox://mapbox.2opop9hr"
    >
    </mgl-vector-source>

    <mgl-layer *ngIf="!mapIsLoading"
      id="museums"
      type="circle"
      source="museums"
      [paint]="{
        'circle-radius': 8,
        'circle-color': 'rgba(55,148,179,1)'
      }"
      sourceLayer="museum-cusco"
    >
    </mgl-layer>
  </mgl-map>
  <mat-radio-group [ngModel]="layerId" (ngModelChange)="changeStyle($event)">

    <mat-radio-button value="basic">basic</mat-radio-button>
    <mat-radio-button value="streets">streets</mat-radio-button>
    <mat-radio-button value="bright">bright</mat-radio-button>
    <mat-radio-button value="light">light</mat-radio-button>
    <mat-radio-button value="dark">dark</mat-radio-button>
    <mat-radio-button value="satellite">satellite</mat-radio-button>
  </mat-radio-group>
  `,
  styleUrls: ['./examples.css', './set-style.component.css']
})
export class SetStyleComponent implements OnInit {
  layerId = 'basic';
  style: string;
  mapIsLoading: boolean = false;

  ngOnInit() {
    this.changeStyle(this.layerId);
  }

  changeStyle(layerId: string) {
    this.mapIsLoading = true;
    this.style = `mapbox://styles/mapbox/${layerId}-v9`;
    setTimeout(() => {
        this.mapIsLoading = false;     
     }, 1000);
  }
}

[Wykks]

(Sorry for being late on this, I took a little break on ngx-mapbox-gl + followed by some small holidays)

This is something my buddy at react-mapbox-gl noticed (https://github.com/alex3165/react-mapbox-gl/blob/master/src/layer.ts#L194), but when I started ngx-mapbox-gl I didn't reproduce the issue somehow...