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 index d6981c09e..1ecf48b32 100644 --- 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(this.MapService.mapInstance, 'data').pipe( + filter((e) => e.sourceId === this.source && e.isSourceLoaded && e.sourceDataType !== 'metadata') + ); const sub = this.MapService.mapCreated$ .pipe( - switchMap(() => - fromEvent(this.MapService.mapInstance, 'data').pipe( - filter((e) => e.sourceId === this.source && e.isSourceLoaded && e.sourceDataType !== 'metadata'), - take(1) - ) - ), + switchMapTo(clusterDataUpdate$), switchMap(() => merge( fromEvent(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 index 9e49c1ee0..46c072125 100644 --- 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 = await import('./earthquakes.geo.json'); + setInterval(() => { + if (earthquakes.features.length) { + earthquakes.features.pop(); + } + this.earthquakes = { ...earthquakes }; + }, 500); } selectCluster(event: MouseEvent, feature: any) {