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

master
Marco Hügin 5 years ago
parent ba4dde0bea
commit ff7d407f8e

@ -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();
}
});
}
}

@ -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>

After

Width:  |  Height:  |  Size: 273 B

Loading…
Cancel
Save