Merge pull request #103 from Sybit-Education/feature/current-location

Feature/current location

Author: AlexanderKugler

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>
+</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>
+}
+

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;

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,10 +48,12 @@ export class MapComponent implements OnInit {
   }
 
     ngOnInit(): void {
+      this.isLoading = true;
       this.vectorSource = new VectorSource();
       const vectorLayer = new VectorLayer({
         source: this.vectorSource
       });
+      vectorLayer.setZIndex(1);
 
       this.map = new Map({
         target: 'map',
@@ -67,15 +70,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.05 // 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));
 
@@ -108,7 +105,25 @@ export class MapComponent implements OnInit {
           })
         }));
       });
+      this.isLoading = false;
+    });
+  }
+
+  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