diff --git a/projects/ngx-maplibre-gl/src/lib/map/map.component.ts b/projects/ngx-maplibre-gl/src/lib/map/map.component.ts index 87f9d582..3885f4d5 100644 --- a/projects/ngx-maplibre-gl/src/lib/map/map.component.ts +++ b/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>('container'); + readonly mapContainer = + viewChild.required>('container'); constructor() { afterNextRender(() => { @@ -339,6 +341,10 @@ export class MapComponent implements OnChanges, OnDestroy, MapEvent { this.mapService.changeCanvasCursor(cursorStyle); } }); + + afterRender(() => { + this.mapService.clearMapElements(); + }); } ngOnDestroy() { diff --git a/projects/ngx-maplibre-gl/src/lib/map/map.service.ts b/projects/ngx-maplibre-gl/src/lib/map/map.service.ts index 2075b2af..8323f59d 100644 --- a/projects/ngx-maplibre-gl/src/lib/map/map.service.ts +++ b/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([]); private readonly popupsToRemove = signal([]); private readonly imageIdsToRemove = signal([]); - 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() {