add pin for quete page

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

@@ -257,6 +257,16 @@ export class LeafletMapComponent implements OnInit {
       </svg>
     `);
 
+    const poiPin = this.createDivIcon(`
+    <svg class="w-6 h-6 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+      <path 
+        d="M12 .587l3.668 7.431 8.2 1.191-5.934 5.782 1.401 8.169L12 18.897l-7.335 3.863 1.401-8.169L.132 9.209l8.2-1.191z"
+        stroke="black"
+        stroke-width="1"
+      />
+    </svg>
+  `);  
+
     const filteredPins = this.allPins.filter((pin) => {
       const pinCountry = this.pinCountries[pin.id];
       const matchesCountry = this.selectedCountry
@@ -273,8 +283,9 @@ export class LeafletMapComponent implements OnInit {
     });
 
     filteredPins.forEach((pin) => {
+      const markerIcon = pin.is_poi ? poiPin : visitedIcon;
       const marker = L.marker(pin.location as [number, number], {
-        icon: visitedIcon,
+        icon: markerIcon,
       });
 
       marker.on('popupclose', () => {

src/app/model/Pin.ts

@@ -5,6 +5,7 @@ export interface Pin {
   title: string;
   files: string[];
   description: string;
+  is_poi: boolean;
   user_id: string;
   date?: string;
 }