From 211a5bd4dd3d69b4e39b7f46bb01a68103086731 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sun, 27 Feb 2022 19:07:00 +0100
Subject: [PATCH] showing gpx tracks in folders without a photo with gps
 position. #422

---
 .../app/ui/gallery/gallery.component.html     |  2 +-
 .../lightbox.map.gallery.component.ts         |  3 +++
 .../ui/gallery/map/map.gallery.component.html | 22 +++++++++----------
 .../ui/gallery/map/map.gallery.component.ts   |  9 +++++---
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/frontend/app/ui/gallery/gallery.component.html b/src/frontend/app/ui/gallery/gallery.component.html
index f95f7fe2..2a0fc932 100644
--- a/src/frontend/app/ui/gallery/gallery.component.html
+++ b/src/frontend/app/ui/gallery/gallery.component.html
@@ -59,7 +59,7 @@
             class="oi oi-chevron-{{blogOpen ? 'top' : 'bottom'}}"></span>
           </button>
         </div>
-        <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
+        <app-gallery-map *ngIf="(isPhotoWithLocation || (directoryContent?.metaFile | gpxFiles)?.length > 0) && mapEnabled"
                          [photos]="directoryContent?.media | photosOnly"
                          [gpxFiles]="directoryContent?.metaFile | gpxFiles"></app-gallery-map>
       </div>
diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
index f124fdf4..e207860d 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
@@ -354,6 +354,9 @@ export class GalleryMapLightboxComponent implements OnChanges {
   }
 
   private centerMap(): void {
+    if (this.mapLayersControlOption.overlays.Photos.getLayers().length === 0) {
+      return;
+    }
     this.leafletMap.fitBounds(
       latLngBounds((this.mapLayersControlOption.overlays.Photos.getLayers() as Marker[])
         .map(m => m.getLatLng())
diff --git a/src/frontend/app/ui/gallery/map/map.gallery.component.html b/src/frontend/app/ui/gallery/map/map.gallery.component.html
index beefae41..920b85c6 100644
--- a/src/frontend/app/ui/gallery/map/map.gallery.component.html
+++ b/src/frontend/app/ui/gallery/map/map.gallery.component.html
@@ -1,13 +1,11 @@
-<ng-template [ngIf]="markerLayer.length>0">
-  <app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
-  <div class="clickable" id="map" #map (click)="click()">
-    <div
-      class="leaflet-map"
-      leaflet
-      [leafletOptions]="options"
-      [leafletLayers]="markerLayer"
-      (leafletMapReady)="onMapReady($event)">
-    </div>
-
+<app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
+<div class="clickable" id="map" #map (click)="click()">
+  <div
+    class="leaflet-map"
+    leaflet
+    [leafletOptions]="options"
+    [leafletLayers]="markerLayer"
+    (leafletMapReady)="onMapReady($event)">
   </div>
-</ng-template>
+
+</div>
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 96fc560f..cb7d15eb 100644
--- a/src/frontend/app/ui/gallery/map/map.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/map/map.gallery.component.ts
@@ -30,6 +30,7 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
     doubleClickZoom: false,
     boxZoom: false,
     zoom: 0,
+    center: [0, 0]
   };
   markerLayer: Marker[] = [];
 
@@ -42,9 +43,11 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
 
   onMapReady(map: Map): void {
     this.leafletMap = map;
-    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]));
+    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.leafletMap.setZoom(0);
   }