From 56ad405ae1b84a8b0283dc9d6dc1ef6996685bbd Mon Sep 17 00:00:00 2001
From: "Strittmatter, Stephan" <Stephan.Strittmatter@sybit.de>
Date: Fri, 2 Aug 2024 12:33:03 +0200
Subject: [PATCH 1/3] fix: scaling

---
 src/app/components/map/map.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts
index eb6332c..419be40 100644
--- a/src/app/components/map/map.component.ts
+++ b/src/app/components/map/map.component.ts
@@ -71,10 +71,10 @@ export class MapComponent implements OnInit {
         image: new Icon({
           src: '/pin/my_location.png', // Pfad zu deinem benutzerdefinierten Pin-Bild
           anchor: [0.5, 1], // Bildausrichtung
-          scale: 0.05 // Größe des Pins
+          scale: 0.09 // Größe des Pins
         })
       }));
-    
+
     this.vectorSource.addFeature(this.userLocationFeature);
     this.map.on('click', this.handleMapClick.bind(this));
     this.map.on('pointermove', this.handlePointerMove.bind(this));

From 3456bf9bc1cde4e5dddc284b42cc181804c5818e Mon Sep 17 00:00:00 2001
From: "Strittmatter, Stephan" <Stephan.Strittmatter@sybit.de>
Date: Fri, 2 Aug 2024 12:41:44 +0200
Subject: [PATCH 2/3] fix: current Location zindex

---
 src/app/components/map/map.component.ts | 30 +++++++++++++++++--------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts
index 419be40..e8f5a22 100644
--- a/src/app/components/map/map.component.ts
+++ b/src/app/components/map/map.component.ts
@@ -51,6 +51,7 @@ export class MapComponent implements OnInit {
       const vectorLayer = new VectorLayer({
         source: this.vectorSource
       });
+      vectorLayer.setZIndex(1);
   
       this.map = new Map({
         target: 'map',
@@ -67,15 +68,9 @@ export class MapComponent implements OnInit {
         maxZoom: 25
       })
     });
-    this.userLocationFeature.setStyle(new Style({
-        image: new Icon({
-          src: '/pin/my_location.png', // Pfad zu deinem benutzerdefinierten Pin-Bild
-          anchor: [0.5, 1], // Bildausrichtung
-          scale: 0.09 // Größe des Pins
-        })
-      }));
-
-    this.vectorSource.addFeature(this.userLocationFeature);
+    
+    this.addUserLocationPinLayer();
+
     this.map.on('click', this.handleMapClick.bind(this));
     this.map.on('pointermove', this.handlePointerMove.bind(this));
   
@@ -111,6 +106,23 @@ export class MapComponent implements OnInit {
     });
   }
 
+  private addUserLocationPinLayer() {
+    this.userLocationFeature.setStyle(new Style({
+      image: new Icon({
+        src: '/pin/my_location.png', // Pfad zu deinem benutzerdefinierten Pin-Bild
+        anchor: [0.5, 1], // Bildausrichtung
+        scale: 0.09 // Größe des Pins
+      })
+    }));
+    const userLocationVectorSource = new VectorSource();
+    userLocationVectorSource.addFeature(this.userLocationFeature);
+    const userLocationVectorLayer = new VectorLayer({
+      source: userLocationVectorSource
+    });
+    userLocationVectorLayer.setZIndex(2);
+    this.map.addLayer(userLocationVectorLayer);
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   handleMapClick(event: MapBrowserEvent<any>) {
     this.map.forEachFeatureAtPixel(event.pixel, (feature) => {

From 39d9bf9dc0035fef77c91e2543aeac31214644e0 Mon Sep 17 00:00:00 2001
From: "Strittmatter, Stephan" <Stephan.Strittmatter@sybit.de>
Date: Fri, 2 Aug 2024 12:55:29 +0200
Subject: [PATCH 3/3] chore: loading indicator

---
 src/app/components/map/map.component.html | 10 +++++++++-
 src/app/components/map/map.component.scss |  9 +++++++++
 src/app/components/map/map.component.ts   |  3 +++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/app/components/map/map.component.html b/src/app/components/map/map.component.html
index 7934f45..d6ca6bb 100644
--- a/src/app/components/map/map.component.html
+++ b/src/app/components/map/map.component.html
@@ -7,4 +7,12 @@
             <path d="M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4"/>
         </svg>
     </span>
-</button>
\ No newline at end of file
+</button>
+@if (isLoading) {
+    <div class="loading d-flex justify-content-center align-items-center" style="height: 80vh;">
+        <div class="spinner-border" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>
+    </div>
+}
+
diff --git a/src/app/components/map/map.component.scss b/src/app/components/map/map.component.scss
index fc8ee3b..c6d90e8 100644
--- a/src/app/components/map/map.component.scss
+++ b/src/app/components/map/map.component.scss
@@ -21,6 +21,15 @@
   display: none;
 }
 
+.loading {
+  position: absolute;
+  z-index: 99;
+  top: 50px;
+  left: 0;
+  width: 100%;
+  opacity: 80%;
+}
+
 @media (max-width: 768px) {
   .map {
     height: 80vh;
diff --git a/src/app/components/map/map.component.ts b/src/app/components/map/map.component.ts
index 8052b91..e3c426d 100644
--- a/src/app/components/map/map.component.ts
+++ b/src/app/components/map/map.component.ts
@@ -22,6 +22,7 @@ import { Activity } from '../../types/activity.interface';
     styleUrls: ['./map.component.scss']
 })
 export class MapComponent implements OnInit {
+    isLoading = true;
     map!: Map;
     vectorSource!: VectorSource;
 
@@ -47,6 +48,7 @@ export class MapComponent implements OnInit {
   }
   
     ngOnInit(): void {
+      this.isLoading = true;
       this.vectorSource = new VectorSource();
       const vectorLayer = new VectorLayer({
         source: this.vectorSource
@@ -103,6 +105,7 @@ export class MapComponent implements OnInit {
           })
         }));
       });
+      this.isLoading = false;
     });
   }