From 491400523e3a8c9830c1a2d2b67807c7f600213f Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Sun, 2 May 2021 08:50:43 +0200
Subject: [PATCH] improving map marker cluster design

---
 .../lightbox/lightbox.map.gallery.component.css    |  6 ++++++
 .../map/lightbox/lightbox.map.gallery.component.ts | 14 +++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
index f89d6018..03b822a1 100644
--- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
+++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -89,12 +89,14 @@
   width: 30px;
   height: 30px;
   color: white;
+  border-radius: 50%!important;
 }
 
 ::ng-deep .marker-cluster-small div {
   background-color: #0094ff;
   width: 20px;
   height: 20px;
+  border-radius: 50%!important;
 }
 
 ::ng-deep .marker-cluster-small span {
@@ -105,10 +107,12 @@
 ::ng-deep .marker-cluster-medium {
   background-color: rgba(0, 123, 255, 0.6);
   color: white;
+  border-radius: 50%!important;
 }
 
 ::ng-deep .marker-cluster-medium div {
   background-color: #007bff;
+  border-radius: 50%!important;
 }
 
 ::ng-deep .marker-cluster-large {
@@ -116,12 +120,14 @@
   width: 50px;
   height: 50px;
   color: white;
+  border-radius: 50%!important;
 }
 
 ::ng-deep .marker-cluster-large div {
   background-color: #0062ff;
   width: 40px;
   height: 40px;
+  border-radius: 50%!important;
 }
 
 ::ng-deep .marker-cluster-large span {
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 c07eed5c..4a8e50e1 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
@@ -61,8 +61,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
     {
       baseLayers: {}, overlays: {
         Photos: markerClusterGroup({
-          animate: true,
-          animateAddingMarkers: true,
+          maxClusterRadius: 20,
           iconCreateFunction: (cluster) => {
             const childCount = cluster.getChildCount();
             let size: number;
@@ -158,7 +157,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
       height: GalleryMapLightboxComponent.getScreenHeight()
     } as Dimension);
     this.showImages();
-    this.centerMap();
+    //  this.centerMap();
     PageHelper.hideScrollY();
     await Utils.wait(0);
     this.lightboxDimension = ({
@@ -197,7 +196,6 @@ export class GalleryMapLightboxComponent implements OnChanges {
   showImages(): void {
     this.hideImages();
 
-    this.mapLayersControlOption.overlays.Photos.clearLayers();
 
     // make sure to enable photos layers when opening map
     if (this.leafletMap && !this.leafletMap.hasLayer(this.mapLayersControlOption.overlays.Photos)) {
@@ -264,6 +262,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
             iconUrl: iconTh.Src,
             iconSize: this.usedIconSize, // size of the icon
           }));
+          mkr.options.alt = p.name;
         };
 
         if (iconTh.Available === true) {
@@ -289,6 +288,8 @@ export class GalleryMapLightboxComponent implements OnChanges {
       th.destroy();
     });
     this.thumbnailsOnLoad = [];
+
+    this.mapLayersControlOption.overlays.Photos.clearLayers();
   }
 
   @HostListener('window:keydown', ['$event'])
@@ -332,7 +333,10 @@ export class GalleryMapLightboxComponent implements OnChanges {
     }
     this.usedIconSize = this.leafletMap.getZoom() < 15 ? this.smallIconSize : this.iconSize;
     (this.mapLayersControlOption.overlays.Photos.getLayers() as Marker[]).forEach(mkr => {
-
+      // if alt is not present icon is not yet set, so do not change the size
+      if (!mkr.options.alt) {
+        return;
+      }
       mkr.getIcon().options.iconSize = this.usedIconSize;
       mkr.setIcon(mkr.getIcon());
     });