fix(mglImage): re-add image when style change

fix #76

Author: Wykks

projects/ngx-mapbox-gl/src/lib/image/image.component.ts

@@ -9,6 +9,8 @@ import {
   Output,
   SimpleChanges
 } from '@angular/core';
+import { fromEvent, Subscription } from 'rxjs';
+import { filter, startWith, switchMap } from 'rxjs/operators';
 import { MapService } from '../map/map.service';
 import { MapImageData, MapImageOptions } from '../map/map.types';
 
@@ -28,40 +30,22 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
   @Output() error = new EventEmitter<{ status: number }>();
   @Output() loaded = new EventEmitter<void>();
 
-  private imageAdded = false;
+  private isAdded = false;
+  private isAdding = false;
+  private sub: Subscription;
 
   constructor(
     private MapService: MapService,
     private zone: NgZone
   ) { }
 
   ngOnInit() {
-    this.MapService.mapLoaded$.subscribe(async () => {
-      if (this.data) {
-        this.MapService.addImage(
-          this.id,
-          this.data,
-          this.options
-        );
-        this.imageAdded = true;
-      } else if (this.url) {
-        try {
-          await this.MapService.loadAndAddImage(
-            this.id,
-            this.url,
-            this.options
-          );
-          this.imageAdded = true;
-          this.zone.run(() => {
-            this.loaded.emit();
-          });
-        } catch (error) {
-          this.zone.run(() => {
-            this.error.emit(error);
-          });
-        }
-      }
-    });
+    this.sub = this.MapService.mapLoaded$.pipe(
+      switchMap(() => fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
+        startWith(undefined),
+        filter(() => !this.isAdding && !this.MapService.mapInstance.hasImage(this.id))
+      )),
+    ).subscribe(() => this.init());
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -76,8 +60,41 @@ export class ImageComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnDestroy() {
-    if (this.imageAdded) {
+    if (this.isAdded) {
       this.MapService.removeImage(this.id);
     }
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
+  }
+
+  private async init() {
+    this.isAdding = true;
+    if (this.data) {
+      this.MapService.addImage(
+        this.id,
+        this.data,
+        this.options
+      );
+      this.isAdded = true;
+      this.isAdding = false;
+    } else if (this.url) {
+      try {
+        await this.MapService.loadAndAddImage(
+          this.id,
+          this.url,
+          this.options
+        );
+        this.isAdded = true;
+        this.isAdding = false;
+        this.zone.run(() => {
+          this.loaded.emit();
+        });
+      } catch (error) {
+        this.zone.run(() => {
+          this.error.emit(error);
+        });
+      }
+    }
   }
 }

projects/ngx-mapbox-gl/src/lib/layer/layer.component.ts

@@ -33,7 +33,7 @@ import {
   VideoSource
 } from 'mapbox-gl';
 import { fromEvent, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { filter, mapTo, switchMap, startWith } from 'rxjs/operators';
 import { MapService } from '../map/map.service';
 
 @Component({
@@ -69,14 +69,13 @@ export class LayerComponent implements OnInit, OnDestroy, OnChanges, Layer {
   ) { }
 
   ngOnInit() {
-    this.MapService.mapLoaded$.subscribe(() => {
-      this.init(true);
-      this.sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
-        filter(() => !this.MapService.mapInstance.getLayer(this.id))
-      ).subscribe(() => {
-        this.init(false);
-      });
-    });
+    this.sub = this.MapService.mapLoaded$.pipe(
+      switchMap(() => fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
+        startWith(true),
+        filter(() => !this.MapService.mapInstance.getLayer(this.id)),
+        mapTo(false)
+      )),
+    ).subscribe((bindEvents: boolean) => this.init(bindEvents));
   }
 
   ngOnChanges(changes: SimpleChanges) {