From 04aacdc43142d696d7cf36cd7b1fcf4788036853 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Tue, 6 Apr 2021 13:15:50 +0200
Subject: [PATCH] Reducing max markers in map preview

---
 src/common/config/public/ClientConfig.ts                     | 2 ++
 src/frontend/app/ui/gallery/map/map.gallery.component.ts     | 5 +++--
 .../search/search-field/search-field.gallery.component.ts    | 5 +++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/common/config/public/ClientConfig.ts b/src/common/config/public/ClientConfig.ts
index 8f7b5e90..078dfcd0 100644
--- a/src/common/config/public/ClientConfig.ts
+++ b/src/common/config/public/ClientConfig.ts
@@ -61,6 +61,8 @@ export module ClientConfig {
   export class MapConfig {
     @ConfigProperty()
     enabled: boolean = true;
+    @ConfigProperty({type: 'unsignedInt', description: 'Maximum number of markers to be shown on the map preview on the gallery page.'})
+    maxPreviewMarkers: number = 50;
     @ConfigProperty()
     useImageMarkers: boolean = true;
     @ConfigProperty({type: MapProviders})
diff --git a/src/frontend/app/ui/gallery/map/map.gallery.component.ts b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
index 40d1cd9d..25aacd72 100644
--- a/src/frontend/app/ui/gallery/map/map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
@@ -5,6 +5,7 @@ import {GalleryMapLightboxComponent} from './lightbox/lightbox.map.gallery.compo
 import {FileDTO} from '../../../../../common/entities/FileDTO';
 import {MapService} from './map.service';
 import {MapComponent} from '@yaga/leaflet-ng2';
+import {Config} from '../../../../../common/config/public/Config';
 
 @Component({
   selector: 'app-gallery-map',
@@ -51,14 +52,14 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
     this.mapPhotos = this.photos.filter(p => {
       return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData &&
         p.metadata.positionData.GPSData.latitude && p.metadata.positionData.GPSData.longitude;
-    }).map(p => {
+    }).slice(0, Config.Client.Map.maxPreviewMarkers).map(p => {
       return {
         lat: p.metadata.positionData.GPSData.latitude,
         lng: p.metadata.positionData.GPSData.longitude
       };
     });
 
-    if (this.yagaMap) {
+    if (this.yagaMap && this.mapPhotos.length > 0) {
       this.yagaMap.setView(this.mapPhotos[0], 99);
       this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
       this.yagaMap.zoom = 0;
diff --git a/src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.ts b/src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.ts
index cbb199d6..0232aebe 100644
--- a/src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.ts
@@ -221,8 +221,9 @@ export class GallerySearchFieldComponent implements ControlValueAccessor, Valida
 
     if (this.rawSearchText.trim().length > 0) { // are we searching for anything?
       try {
-        if (this.autoCompleteItems) {
-          this.autoCompleteItems.unsubscribe();
+        if (this.autoCompleteItemsSubscription) {
+          this.autoCompleteItemsSubscription.unsubscribe();
+          this.autoCompleteItemsSubscription = null;
         }
         this.autoCompleteItems = this._autoCompleteService.autoComplete(searchText);
         this.autoCompleteItemsSubscription = this.autoCompleteItems.subscribe(() => {