From 6bfccc3311db66a9dcb746ececbafa582a311fab Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Wed, 20 Sep 2023 22:07:04 +0200
Subject: [PATCH] Fixing leaflet map removal error

---
 .../ui/gallery/map/map.gallery.component.ts   | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

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 fc5f2cc9..48a58a07 100644
--- a/src/frontend/app/ui/gallery/map/map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
@@ -53,9 +53,9 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
         attribution: this.mapService.ShortAttributions,
       }),
       'dark':
-          tileLayer(this.mapService.DarkMapLayer.url, {
-            attribution: this.mapService.ShortAttributions,
-          })
+        tileLayer(this.mapService.DarkMapLayer.url, {
+          attribution: this.mapService.ShortAttributions,
+        })
     };
     if (this.themeService.darkMode.value) {
       this.options.layers = [this.layers.dark];
@@ -86,13 +86,16 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
 
   onMapReady(map: Map): void {
     this.leafletMap = map;
+    if (!this.leafletMap) {
+      return;
+    }
     if (this.markerLayer.length > 0) {
       this.leafletMap.setView(this.markerLayer[0].getLatLng(), 99);
       this.leafletMap.fitBounds(
-          this.markerLayer.map(
-              (mp): [number, number] =>
-                  [mp.getLatLng().lat, mp.getLatLng().lng] as [number, number]
-          )
+        this.markerLayer.map(
+          (mp): [number, number] =>
+            [mp.getLatLng().lat, mp.getLatLng().lng] as [number, number]
+        )
       );
     }
     this.leafletMap.setZoom(0);
@@ -100,31 +103,31 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
 
   ngOnChanges(): void {
     this.markerLayer = this.photos
-        .filter((p): number => {
-          return (
-              p.metadata &&
-              p.metadata.positionData &&
-              p.metadata.positionData.GPSData &&
-              p.metadata.positionData.GPSData.latitude &&
-              p.metadata.positionData.GPSData.longitude
-          );
-        })
-        .slice(0, Config.Map.maxPreviewMarkers)
-        .map((p): Marker => {
-          return marker({
-            lat: p.metadata.positionData.GPSData.latitude,
-            lng: p.metadata.positionData.GPSData.longitude,
-          } as LatLngLiteral).setIcon(MarkerFactory.defIconSmall);
-        });
+      .filter((p): number => {
+        return (
+          p.metadata &&
+          p.metadata.positionData &&
+          p.metadata.positionData.GPSData &&
+          p.metadata.positionData.GPSData.latitude &&
+          p.metadata.positionData.GPSData.longitude
+        );
+      })
+      .slice(0, Config.Map.maxPreviewMarkers)
+      .map((p): Marker => {
+        return marker({
+          lat: p.metadata.positionData.GPSData.latitude,
+          lng: p.metadata.positionData.GPSData.longitude,
+        } as LatLngLiteral).setIcon(MarkerFactory.defIconSmall);
+      });
 
     if (this.leafletMap && this.markerLayer.length > 0) {
       this.options.center = this.markerLayer[0].getLatLng();
       this.leafletMap.setView(this.markerLayer[0].getLatLng(), 99);
       this.leafletMap.fitBounds(
-          this.markerLayer.map(
-              (mp): [number, number] =>
-                  [mp.getLatLng().lat, mp.getLatLng().lng] as [number, number]
-          )
+        this.markerLayer.map(
+          (mp): [number, number] =>
+            [mp.getLatLng().lat, mp.getLatLng().lng] as [number, number]
+        )
       );
       this.leafletMap.setZoom(0);
     }