From ff7d407f8e28ebcee26f3e9a9cde97f39ae97359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marco=20H=C3=BCgin?= <marcohuegin@googlemail.com>
Date: Sat, 23 May 2020 20:29:20 +0200
Subject: [PATCH] Add function to create marker on map, add image-folder to
 assents

---
 src/app/tab2/tab2.page.ts | 23 +++++++++++++++++++++++
 src/assets/image/star.svg |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 src/assets/image/star.svg

diff --git a/src/app/tab2/tab2.page.ts b/src/app/tab2/tab2.page.ts
index 79e81a1..ef53b48 100644
--- a/src/app/tab2/tab2.page.ts
+++ b/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();
+      }
+    });
   }
 }
diff --git a/src/assets/image/star.svg b/src/assets/image/star.svg
new file mode 100644
index 0000000..3db8cec
--- /dev/null
+++ b/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>
\ No newline at end of file