Fix map services init/destroy

web-app/src/app/event/event.service.ts

@@ -42,6 +42,10 @@ export class EventService {
   }
 
   destroy() {
+    this.eventsById = {}
+    this.filterService.removeListener(this)
+    this.pollingService.removeListener(this)
+
     if (this.pollingTimeout) {
       clearTimeout(this.pollingTimeout)
     }
@@ -65,12 +69,11 @@ export class EventService {
   }
 
   onFilterChanged(filter: any) {
-    const event = filter.event?.added?.length ? filter.event.added[0] : null
-    if (event) {
+    if (filter.event) {
       this.onEventChanged(filter.event);
     }
 
-    if (event || filter.timeInterval) { // requery server
+    if (filter.event?.added?.length || filter.timeInterval) { // requery server
       this.fetch().subscribe()
     } else if (filter.teams) { // filter in memory
       this.onTeamsChanged()
@@ -82,7 +85,7 @@ export class EventService {
   }
 
   onEventChanged(event: any) {
-    const { added = [], removed = [], foo = [] } = event 
+    const { added = [], removed = [] } = event 
     added.forEach((added: any) => {
       if (!this.eventsById[added.id]) {
         this.eventsById[added.id] = (JSON.parse(JSON.stringify(added)));

web-app/src/app/map/layers/layer.service.ts

@@ -30,40 +30,40 @@ export interface StyleEvent {
   providedIn: 'root'
 })
 export class MapLayerService {
-  private toggleSource = new Subject<ToggleEvent>();
-  private zoomSource = new Subject<ZoomEvent>();
-  private opacitySource = new Subject<OpacityEvent>();
-  private styleSource = new Subject<StyleEvent>();
+  private toggleSource = new Subject<ToggleEvent>()
+  private zoomSource = new Subject<ZoomEvent>()
+  private opacitySource = new Subject<OpacityEvent>()
+  private styleSource = new Subject<StyleEvent>()
 
-  toggle$ = this.toggleSource.asObservable();
-  zoom$ = this.zoomSource.asObservable();
-  opacity$ = this.opacitySource.asObservable();
-  style$ = this.styleSource.asObservable();
+  toggle$ = this.toggleSource.asObservable()
+  zoom$ = this.zoomSource.asObservable()
+  opacity$ = this.opacitySource.asObservable()
+  style$ = this.styleSource.asObservable()
 
   toggle(layer: any, value: boolean): void {
     this.toggleSource.next({
       layer: layer,
       value: value
-    });
+    })
   }
 
   zoom(layer: any): void {
     this.zoomSource.next({
       layer: layer
-    });
+    })
   }
 
   opacity(layer: any, opacity: number): void {
     this.opacitySource.next({
       layer: layer,
       opacity: opacity
-    });
+    })
   }
 
   style(layer: any, style: SimpleStyle): void {
     this.styleSource.next({
       layer: layer,
       style: style
-    });
+    })
   }
 }

web-app/src/app/map/map.component.ts

@@ -13,10 +13,6 @@ import { moveItemInArray } from '@angular/cdk/drag-drop'
 import { locationMarker } from './marker/LocationMarker'
 import { observationMarker } from './marker/ObservationMarker'
 import { COUNTRIES as countries } from './layers/static/layers'
-
-import _ from 'underscore'
-import * as moment from 'moment'
-
 import 'leaflet-editable'
 import 'leaflet.markercluster'
 import { FeatureEditor } from './edit/FeatureEditor'
@@ -28,6 +24,9 @@ import { UserService } from '../user/user.service'
 import { FilterComponent } from '../filter/filter.component'
 import { MatDialog } from '@angular/material/dialog'
 import { ExportDialogComponent } from '../export/export-dialog.component'
+import _ from 'underscore'
+import * as moment from 'moment'
+import { Subscription } from 'rxjs'
 
 Icon.Default.imagePath = '/'
 
@@ -92,6 +91,11 @@ export class MapComponent implements OnDestroy, AfterViewInit {
   listener: any
   pollListener: any
 
+  toggleSubscription: Subscription
+  zoomSubscription: Subscription
+  opacitySubscription: Subscription
+  styleSubscription: Subscription
+
   constructor(
     public dialog: MatDialog,
     private mapService: MapService,
@@ -101,10 +105,10 @@ export class MapComponent implements OnDestroy, AfterViewInit {
     private filterService: FilterService,
     private localStorageService: LocalStorageService
   ) {
-    layerService.toggle$.subscribe(event => this.layerTogged(event));
-    layerService.zoom$.subscribe(event => this.zoom(event));
-    layerService.opacity$.subscribe(event => this.opacityChanged(event));
-    layerService.style$.subscribe(event => this.styleChanged(event));
+    this.toggleSubscription = layerService.toggle$.subscribe(event => this.layerTogged(event));
+    this.zoomSubscription = layerService.zoom$.subscribe(event => this.zoom(event));
+    this.opacitySubscription = layerService.opacity$.subscribe(event => this.opacityChanged(event));
+    this.styleSubscription = layerService.style$.subscribe(event => this.styleChanged(event));
 
     this.mapReizeObserver = new ResizeObserver(() => {
       this.map.invalidateSize({ pan: false, debounceMoveend: true })
@@ -204,7 +208,12 @@ export class MapComponent implements OnDestroy, AfterViewInit {
 
   ngOnDestroy(): void {
     this.mapService.removeListener(this)
-    this.mapReizeObserver?.unobserve(this.mapElement.nativeElement);
+    this.mapReizeObserver?.unobserve(this.mapElement.nativeElement)
+
+    this.toggleSubscription.unsubscribe()
+    this.zoomSubscription.unsubscribe()
+    this.opacitySubscription.unsubscribe()
+    this.styleSubscription.unsubscribe()
   }
 
   saveMapPosition() {
@@ -707,8 +716,8 @@ export class MapComponent implements OnDestroy, AfterViewInit {
       delete this.layers[layer.id]
 
       Object.values(this.groups).forEach((group: any) => {
-        group.layers = group.layers.filter(layer => {
-          return layer.layer !== layer.layer;
+        group.layers = group.layers.filter(groupLayer => {
+          return layer.layer !== groupLayer.layer;
         });
       });
     }

web-app/src/app/map/map.service.ts

@@ -491,14 +491,6 @@ export class MapService {
     });
   }
 
-  overlayAdded(overlay) {
-    this.listeners.forEach((listener: any) => {
-      if (typeof listener.onOverlayAdded === 'function') {
-        listener.onOverlayAdded(overlay);
-      }
-    });
-  }
-
   removeLayer(layer) {
     const vectorLayer = this.vectorLayers[layer.id];
     if (vectorLayer) {

web-app/tsconfig.app.json

@@ -17,7 +17,6 @@
   "exclude": [
     "src/test.ts",
     "src/**/*.spec.ts",
-    "admin/src/**/*.ts",
     "admin/src/test.ts",
     "admin/src/**/*.spec.ts"
   ]