Add function to create marker on map, add image-folder to assents

src/app/tab2/tab2.page.ts

@@ -11,6 +11,9 @@ import { Component } from "@angular/core";
 export class Tab2Page {
   constructor(public plt: Platform) {}
 
+  //TODO: Hier muss der Service mit den eingelesenen CSV-Daten angesprochen werden
+  csvData = null;
+
   ngAfterViewInit() {
     this.plt.ready().then(() => {
       this.initMap();
@@ -24,5 +27,25 @@ export class Tab2Page {
       attribution:
         '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }).addTo(map);
+    //this.setMarker(this.csvData, map);
+  }
+
+  setMarker(angebote, map) {
+    const customMarkerIcon = icon({
+      iconUrl: "assets/image/star.svg",
+      iconSize: [64, 64],
+      popupAnchor: [0, -20],
+    });
+    let latLngBounds = map.getBounds;
+    angebote.forEach((angebot) => {
+      if (latLngBounds.contains(angebot.geo_lat, angebot.geo_lon)) {
+        marker([angebot.geo_lat, angebot.geo_lon], {
+          icon: customMarkerIcon,
+        })
+          .bindPopup(`<b>${angebot.title}</b>`, { autoClose: false })
+          .addTo(map)
+          .openPopup();
+      }
+    });
   }
 }

src/assets/image/star.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-e</title><path d='M480,208H308L256,48,204,208H32l140,96L118,464,256,364,394,464,340,304Z' style='fill:none;stroke:#000;stroke-linejoin:round;stroke-width:32px'/></svg>