Add support for dynamically changing image source properties (#139)

package.json

@@ -56,7 +56,7 @@
     "@types/jasmine": "^3.3.12",
     "@types/jasminewd2": "^2.0.6",
     "@types/lodash-es": "^4.17.3",
-    "@types/mapbox-gl": "^0.51.7",
+    "@types/mapbox-gl": "^0.51.9",
     "@types/node": "^11.13.0",
     "@types/supercluster": "^5.0.1",
     "codelyzer": "^5.0.0",

projects/ngx-mapbox-gl/src/lib/map/map.service.ts

@@ -56,7 +56,7 @@ export interface SetupMarker {
 export type AllSource = MapboxGl.VectorSource |
   MapboxGl.RasterSource |
   MapboxGl.GeoJSONSource |
-  MapboxGl.ImageSourceOptions |
+  MapboxGl.ImageSource |
   MapboxGl.VideoSourceOptions |
   MapboxGl.GeoJSONSourceRaw |
   MapboxGl.CanvasSourceOptions;

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

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { ImageSourceOptions } from 'mapbox-gl';
-import { fromEvent, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { ImageSourceOptions, ImageSource } from 'mapbox-gl';
+import { Subscription } from 'rxjs';
 import { MapService } from '../map/map.service';
 
 @Component({
@@ -17,42 +16,38 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges, Image
   @Input() url: string;
   @Input() coordinates: number[][];
 
-  private sourceAdded = false;
-  private sub = new Subscription();
+  private sub: Subscription;
+  private sourceId?: string;
 
   constructor(
     private MapService: MapService
   ) { }
 
   ngOnInit() {
-    this.MapService.mapLoaded$.subscribe(() => {
-      this.init();
-      const sub = fromEvent(<any>this.MapService.mapInstance, 'styledata').pipe(
-        filter(() => !this.MapService.mapInstance.getSource(this.id))
-      ).subscribe(() => {
-        this.init();
-      });
-      this.sub.add(sub);
-    });
+    this.sub = this.MapService.mapLoaded$
+      .subscribe(() => this.init());
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (!this.sourceAdded) {
+    if (this.sourceId === undefined) {
       return;
     }
-    if (
-      changes.url && !changes.url.isFirstChange() ||
-      changes.coordinates && !changes.coordinates.isFirstChange()
-    ) {
-      this.ngOnDestroy();
-      this.ngOnInit();
-    }
+
+    const source = this.MapService.getSource<ImageSource>(this.sourceId);
+    // TODO: we need this cast until mapbox typings are fixed (https://github.com/DefinitelyTyped/DefinitelyTyped/pull/36589).
+    (source as any).updateImage({
+      url: changes.url === undefined ? undefined : this.url,
+      coordinates: changes.coordinates === undefined ? undefined : this.coordinates
+    });
   }
 
   ngOnDestroy() {
-    this.sub.unsubscribe();
-    if (this.sourceAdded) {
-      this.MapService.removeSource(this.id);
+    if (this.sub !== undefined) {
+      this.sub.unsubscribe();
+    }
+
+    if (this.sourceId !== undefined) {
+      this.MapService.removeSource(this.sourceId);
     }
   }
 
@@ -62,6 +57,6 @@ export class ImageSourceComponent implements OnInit, OnDestroy, OnChanges, Image
       url: this.url,
       coordinates: this.coordinates
     });
-    this.sourceAdded = true;
+    this.sourceId = this.id;
   }
 }

projects/showcase/src/app/demo/demo.module.ts

@@ -27,6 +27,7 @@ import { HoverStylesComponent } from './examples/hover-styles.component';
 import { InteractiveFalseComponent } from './examples/interactive-false.component';
 import { LanguageSwitchComponent } from './examples/language-switch.component';
 import { LiveUpdateFeatureComponent } from './examples/live-update-feature.component';
+import { LiveUpdateImageSourceComponent } from './examples/live-update-image-srource.component';
 import { LocateUserComponent } from './examples/locate-user.component';
 import { MapboxGlGeocoderComponent } from './examples/mapbox-gl-geocoder.component';
 import { NavigationComponent } from './examples/navigation.component';
@@ -78,6 +79,7 @@ export const DEMO_ROUTES: Routes = [
       { path: 'custom-marker-icons', component: CustomMarkerIconsComponent, data: { label: 'Add custom icons with Markers', cat: Category.CONTROLS_AND_OVERLAYS } },
       { path: 'ngx-custom-marker-icons', component: NgxCustomMarkerIconsComponent, data: { label: '[NGX] Add custom icons with Markers', cat: Category.CONTROLS_AND_OVERLAYS } },
       { path: 'live-update-feature', component: LiveUpdateFeatureComponent, data: { label: 'Update a feature in realtime', cat: Category.SOURCES } },
+      { path: 'live-update-image-source', component: LiveUpdateImageSourceComponent, data: { label: 'Update an image source in realtime', cat: Category.SOURCES } },
       { path: 'popup', component: PopupComponent, data: { label: 'Display a popup', cat: Category.CONTROLS_AND_OVERLAYS } },
       { path: 'set-popup', component: SetPopupComponent, data: { label: 'Attach a popup to a marker instance', cat: Category.CONTROLS_AND_OVERLAYS } },
       { path: 'fullscreen', component: FullscreenComponent, data: { label: 'View a fullscreen map', cat: Category.CONTROLS_AND_OVERLAYS } },
@@ -133,6 +135,7 @@ export const DEMO_ROUTES: Routes = [
     CustomMarkerIconsComponent,
     NgxCustomMarkerIconsComponent,
     LiveUpdateFeatureComponent,
+    LiveUpdateImageSourceComponent,
     PopupComponent,
     SetPopupComponent,
     FullscreenComponent,

projects/showcase/src/app/demo/examples/live-update-image-srource.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { interval, Subscription } from 'rxjs';
+
+@Component({
+  selector: 'showcase-demo',
+  template: `
+  <mgl-map
+    [style]="'mapbox://styles/mapbox/satellite-v9'"
+    [center]="center"
+    [zoom]="[14]"
+    movingMethod="jumpTo"
+  >
+    <mgl-image-source
+      id="test_source"
+      [url]="url"
+      [coordinates]="coordinates"
+    >
+    </mgl-image-source>
+
+    <mgl-layer
+      id="test_layer"
+      source="test_source"
+      type="raster"
+      [paint]="{ 'raster-fade-duration': 0}"
+    >
+    </mgl-layer>
+  </mgl-map>
+  `,
+  styleUrls: ['./examples.css']
+})
+export class LiveUpdateImageSourceComponent implements OnInit, OnDestroy {
+  private sub: Subscription;
+  private readonly size = 0.001;
+  center: number[];
+
+  url = 'assets/red.png';
+  coordinates: number[][];
+
+  async ngOnInit() {
+    const data: GeoJSON.FeatureCollection<GeoJSON.LineString> = <any>await import('./hike.geo.json');
+    const points = data.features[0].geometry!.coordinates;
+    const coordinates = points.map(c => this.makeRectangle(c));
+
+    this.center = points[0];
+    this.coordinates = coordinates[0];
+
+    let i = 0;
+
+    this.sub = interval(250)
+      .subscribe(() => {
+        this.url = Math.random() < 0.5 ? 'assets/red.png' : 'assets/blue.png';
+        this.coordinates = coordinates[i];
+        i = (i + 1) % coordinates.length;
+      });
+  }
+
+  ngOnDestroy() {
+    if (this.sub !== undefined) {
+      this.sub.unsubscribe();
+    }
+  }
+
+  private makeRectangle([long, lat]: number[]): number[][] {
+    return [
+      [long, lat],
+      [long + this.size, lat],
+      [long + this.size, lat - this.size],
+      [long, lat - this.size]
+    ];
+  }
+}

yarn.lock

@@ -574,10 +574,10 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.123.tgz#39be5d211478c8dd3bdae98ee75bb7efe4abfe4d"
   integrity sha512-pQvPkc4Nltyx7G1Ww45OjVqUsJP4UsZm+GWJpigXgkikZqJgRm4c48g027o6tdgubWHwFRF15iFd+Y4Pmqv6+Q==
 
-"@types/mapbox-gl@^0.51.7":
-  version "0.51.7"
-  resolved "https://registry.yarnpkg.com/@types/mapbox-gl/-/mapbox-gl-0.51.7.tgz#01249e155523c1c047b82012e42e343095f89e2f"
-  integrity sha512-HtyBAaq/bXvy42SizlXLifHZJIscLW4hapYcreUpXDvvce1JzWsA78BOx4BSchClLONhNBq1oe+01YjKpNXtDg==
+"@types/mapbox-gl@^0.51.9":
+  version "0.51.9"
+  resolved "https://registry.yarnpkg.com/@types/mapbox-gl/-/mapbox-gl-0.51.9.tgz#1be6e73907f81a8210b6ac2bc9eae82b98d5c25c"
+  integrity sha512-pIosJM1usb40n1Y0xTxdDlGt5ORAr9WcOCYc45vJZEwkuCWzgXJ0JxuLEZVEaM/lMTkPZK8NhsuHwJIzwX0waw==
   dependencies:
     "@types/geojson" "*"