feat(markers-for-cluster): support dynamic cluster data change (close #…

…206)
Wykks · Feb 9, 2020 · 302107e · 302107e
1 parent 8eb920b
commit 302107e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/projects/ngx-mapbox-gl/src/lib/markers-for-clusters/markers-for-clusters.component.ts b/projects/ngx-mapbox-gl/src/lib/markers-for-clusters/markers-for-clusters.component.ts
@@ -12,7 +12,7 @@ import {
 } from '@angular/core';
 import { MapboxGeoJSONFeature, MapSourceDataEvent } from 'mapbox-gl';
 import { fromEvent, merge, Subscription } from 'rxjs';
-import { filter, startWith, switchMap, take } from 'rxjs/operators';
+import { filter, startWith, switchMap, switchMapTo } from 'rxjs/operators';
 import { MapService } from '../map/map.service';
 
 @Directive({ selector: 'ng-template[mglPoint]' })
@@ -71,11 +71,11 @@ export class MarkersForClustersComponent implements OnDestroy, AfterContentInit
   ) { }
 
   ngAfterContentInit() {
+    const clusterDataUpdate$ = fromEvent<MapSourceDataEvent>(<any>this.MapService.mapInstance, 'data').pipe(
+      filter((e) => e.sourceId === this.source && e.isSourceLoaded && e.sourceDataType !== 'metadata')
+    );
     const sub = this.MapService.mapCreated$.pipe(
-      switchMap(() => fromEvent<MapSourceDataEvent>(<any>this.MapService.mapInstance, 'data').pipe(
-        filter((e) => e.sourceId === this.source && e.isSourceLoaded && e.sourceDataType !== 'metadata'),
-        take(1)
-      )),
+      switchMapTo(clusterDataUpdate$),
       switchMap(() => merge(
         fromEvent(<any>this.MapService.mapInstance, 'move'),
         fromEvent(<any>this.MapService.mapInstance, 'moveend')

diff --git a/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts b/projects/showcase/src/app/demo/examples/ngx-cluster-html.component.ts
@@ -61,11 +61,17 @@ import { GeoJSONSourceComponent } from 'ngx-mapbox-gl';
   styleUrls: ['./examples.css', './ngx-cluster-html.component.css']
 })
 export class NgxClusterHtmlComponent implements OnInit {
-  earthquakes: object;
+  earthquakes: GeoJSON.FeatureCollection;
   selectedCluster: { geometry: GeoJSON.Point, properties: any };
 
   async ngOnInit() {
-    this.earthquakes = await import('./earthquakes.geo.json');
+    const earthquakes: GeoJSON.FeatureCollection = <any>await import('./earthquakes.geo.json');
+    setInterval(() => {
+      if (earthquakes.features.length) {
+        earthquakes.features.pop();
+      }
+      this.earthquakes = { ...earthquakes };
+    }, 500);
   }
 
   selectCluster(event: MouseEvent, feature: any) {