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

fix #206
Wykks · Feb 9, 2020 · 3e0ccad · 3e0ccad
1 parent 0560871
commit 3e0ccad
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 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]' })
@@ -58,14 +58,12 @@ export class MarkersForClustersComponent implements OnDestroy, AfterContentInit
   constructor(private MapService: MapService, private ChangeDetectorRef: ChangeDetectorRef, private zone: NgZone) {}
 
   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'),

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
@@ -46,11 +46,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) {