From ff7d407f8e28ebcee26f3e9a9cde97f39ae97359 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20H=C3=BCgin?= 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: '© OpenStreetMap 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(`${angebot.title}`, { 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 @@ +ionicons-v5-e \ No newline at end of file