Merge pull request #100 from Sybit-Education/fix/map

fix map icons not loading

Author: AlexanderKugler

src/app/components/detail/detail.component.html

@@ -14,7 +14,7 @@ <h1 class="card-title text-2xl font-bold text-gray-800">
                 <button
                         (click)="onBookmark(activity.osm_id)"
                         class="bg-[#6bc4f6] hover:bg-[#1891d7] active:bg-[#6bc4f6] transition-all ease-in duration-75 min-w-10 min-h-10 max-h-10 max-w-10 w-10 h-10 flex justify-center items-center text-white rounded-md">
-                    @if (isBookmarked) {
+                    @if (getBookmarked(activity.osm_id)) {
                         <i id="bookmark_id_2" class="bi bi-bookmark-fill"
                         ></i>
                     } @else {

src/app/components/detail/detail.component.ts

@@ -43,28 +43,39 @@ export class DetailComponent implements OnInit {
     }
 
     onBookmark(osm_id: number | null | undefined) {
-        this.isBookmarked = !this.isBookmarked
-        const item = localStorage.getItem("savedLocations")
+        if (osm_id === null || osm_id === undefined) {
+            return;
+        }
+    
+        this.isBookmarked = !this.isBookmarked;
+        const item = localStorage.getItem("savedLocations");
         if (item) {
-            const savedLocations = JSON.parse(item)
+            const savedLocations = JSON.parse(item);
+            const index = savedLocations.indexOf(osm_id);
+    
             if (this.isBookmarked) {
-                savedLocations.push(osm_id)
+                if (index === -1) {
+                    savedLocations.push(osm_id);
+                }
             } else {
-                const index = savedLocations.indexOf(osm_id)
-                savedLocations.splice(index, 1)
+                if (index !== -1) {
+                    savedLocations.splice(index, 1);
+                }
             }
-            localStorage.setItem("savedLocations", JSON.stringify(savedLocations))
+    
+            localStorage.setItem("savedLocations", JSON.stringify(savedLocations));
         } else {
-            localStorage.setItem("savedLocations", JSON.stringify([osm_id]))
+            localStorage.setItem("savedLocations", JSON.stringify([osm_id]));
         }
-
     }
 
     getBookmarked(osm_id: number | null | undefined) {
         const item = localStorage.getItem("savedLocations")
         if(item) {
             const savedLocations = JSON.parse(item)
             this.isBookmarked = savedLocations.includes(osm_id)
+            return this.isBookmarked
         }
+        return false
     }
 }

src/app/components/map/map.component.ts

@@ -10,6 +10,7 @@ import { Router } from '@angular/router';
 import { AirtableService } from '../../services/airtable.service';
 import { MapBrowserEvent } from 'ol';
 import { NgStyle } from "@angular/common";
+import { Activity } from '../../types/activity.interface';
 
 @Component({
     selector: 'app-map',
@@ -38,6 +39,10 @@ export class MapComponent implements OnInit {
     }
     return false;
   }
+
+  getColor(activity: Activity) {
+    return this.getBookmarked(activity.osm_id) ?  "gold" : activity.type.color
+  }
 
   ngOnInit(): void {
     this.vectorSource = new VectorSource();
@@ -67,21 +72,31 @@ export class MapComponent implements OnInit {
     // INITIALIZE
 
     this.airtableService.getActivityList().subscribe(activities => {
-      activities.forEach(activity => {
+      // Ensure features are added to the vector source and the map is refreshed
+      activities.forEach((activity) => {
         const feature = new Feature({
           geometry: new Point(fromLonLat([activity.longitude, activity.latitude])),
-          activity: activity
+          activity: activity,
+          style: new Style({
+            image: new Icon({
+              src: 'data:image/svg+xml;utf8,' + activity.type.svg,
+              color: this.getColor(activity),
+              size: [this.iconSize, this.iconSize]
+            })
+          })
         });
-  
+        this.vectorSource.addFeature(feature);
+      });
+      this.tooltip.nativeElement.style.display = 'none';
+      this.vectorSource.getFeatures().forEach((feature: Feature<Geometry>) => {
+        const activity = feature.get('activity');
         feature.setStyle(new Style({
           image: new Icon({
             src: 'data:image/svg+xml;utf8,' + activity.type.svg,
-            color: activity.type.color,
-            size: [this.iconSize, this.iconSize]
+            color: this.getColor(activity),
+            scale: this.iconSize
           })
         }));
-  
-        this.vectorSource.addFeature(feature);
       });
     });
   }
@@ -115,7 +130,7 @@ export class MapComponent implements OnInit {
         (feature as Feature<Geometry>).setStyle(new Style({
           image: new Icon({
             src: 'data:image/svg+xml;utf8,' + activity.type.svg,
-            color: activity.type.color,
+            color: this.getColor(activity),
             scale: this.iconSize,
           })
         }));
@@ -131,7 +146,7 @@ export class MapComponent implements OnInit {
         feature.setStyle(new Style({
           image: new Icon({
             src: 'data:image/svg+xml;utf8,' + activity.type.svg,
-            color: activity.type.color,
+            color: this.getColor(activity),
             scale: this.iconSize
           })
         }));