Fix/update cluster changes (#189)

* revert removing zone.onMicrotaskEmpty to cleanup cluster correctly on zoom, closes #188

* need to figure out, how to replace for #165

* unsubscribe from zone.onMicrotaskEmpty

* zone.onMicrotaskEmpty subscription already unsubscribed because of  subscription list

* remove unused import

* replace zone.onMicrotaskEmpty with afterRender to call applyChanges

* rename applyChanges to clearMapElements

projects/ngx-maplibre-gl/src/lib/map/map.component.ts

@@ -6,6 +6,7 @@ import {
   OnDestroy,
   SimpleChanges,
   afterNextRender,
+  afterRender,
   inject,
   input,
   output,
@@ -268,7 +269,8 @@ export class MapComponent implements OnChanges, OnDestroy, MapEvent {
     return this.mapService.mapInstance;
   }
 
-  readonly mapContainer = viewChild.required<ElementRef<HTMLDivElement>>('container');
+  readonly mapContainer =
+    viewChild.required<ElementRef<HTMLDivElement>>('container');
 
   constructor() {
     afterNextRender(() => {
@@ -339,6 +341,10 @@ export class MapComponent implements OnChanges, OnDestroy, MapEvent {
         this.mapService.changeCanvasCursor(cursorStyle);
       }
     });
+
+    afterRender(() => {
+      this.mapService.clearMapElements();
+    });
   }
 
   ngOnDestroy() {

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

@@ -36,7 +36,7 @@ import {
   type QueryRenderedFeaturesOptions,
   type ControlPosition,
 } from 'maplibre-gl';
-import { AsyncSubject, Subscription } from 'rxjs';
+import { AsyncSubject } from 'rxjs';
 import type {
   LayerEvents,
   MapEvent,
@@ -100,7 +100,6 @@ export class MapService {
   private readonly markersToRemove = signal<Marker[]>([]);
   private readonly popupsToRemove = signal<Popup[]>([]);
   private readonly imageIdsToRemove = signal<string[]>([]);
-  private readonly subscription = new Subscription();
 
   readonly mapCreated$ = this.mapCreated.asObservable();
   readonly mapLoaded$ = this.mapLoaded.asObservable();
@@ -122,7 +121,6 @@ export class MapService {
 
   destroyMap() {
     if (this.mapInstance) {
-      this.subscription.unsubscribe();
       this.mapInstance.remove();
     }
   }
@@ -621,7 +619,7 @@ export class MapService {
     });
   }
 
-  applyChanges() {
+  clearMapElements() {
     this.zone.runOutsideAngular(() => {
       this.removeMarkers();
       this.removePopups();
@@ -641,8 +639,6 @@ export class MapService {
     if (isIEorEdge) {
       this.mapInstance.setStyle(options.style!);
     }
-
-    this.subscription.add(this.applyChanges());
   }
 
   private removeMarkers() {