SOLUTION: Error in the implementation code. I didn’t have self registered or linked to the popuplink.
Hello,
I have an issue with the opening of popup links in my leaflet map.
Here’s how I add the markers:
multipleMarkersOnLeafletMap() {
// MULTIPLE MARKERS
// Adding mulitple markers, but none of them are linking at the moment
// The following code is looping all the lat and lon in the JSON file loaded in this .ts,
// it does not discriminate what are available and not.
console.log("multipleMarkersOnLeafletMap has been initiated")
for (let i = 0; i < this.works.length; i++) {
// The works that are available will appear as open, the ones that are not will appear unavailable.
if (this.worksavailable.available[i] == true) {
let marker = L.marker([this.works[i].latitude, this.works[i].longitude], { icon: this.workIcon })
.bindPopup(this.works[i].title)
.addTo(this.map);
console.log("This is telling me if the actual works are getting the available ", this.worksavailable.available[i]);
// This does not do anything at the moment. It is supposed to have the player click it and then while using an HTML link transfer the player to a page.
let popuplink='<a class="merch-link" data-merchId="{{this.works[i].id}}">{{this.works[i].title}}</a>'
marker.on('popupopen', function() {
// add event listener to newly added a.merch-link element
this.elementRef.nativeElement.querySelector(".merch-link")
.addEventListener('click', (e)=>
{
// get id from attribute
var merchId = e.target.getAttribute("data-merchId");
this.goToWork(merchId)
});
});
} else {
// The same as above, just unavaialbel.
let marker = L.marker([this.works[i].latitude, this.works[i].longitude], { icon: this.unavaialbleworkIcon })
// The .bindPopup have a static text appearing as the content "".
.bindPopup("Soundline")
.addTo(this.map);
}
}
}
This is called in the platform ready function on the page.
The error I’m getting is this:
ERROR TypeError: Cannot read property 'nativeElement' of undefined
at NewClass.<anonymous> (home.ts:188)
at NewClass.fire (leaflet-src.js:593)
at NewClass.onAdd (leaflet-src.js:9583)
at NewClass._layerAdd (leaflet-src.js:6531)
at NewClass.whenReady (leaflet-src.js:4398)
at NewClass.addLayer (leaflet-src.js:6593)
at NewClass.openPopup (leaflet-src.js:9793)
at NewClass.openPopup (leaflet-src.js:9901)
at NewClass._openPopup (leaflet-src.js:9976)
at NewClass.fire (leaflet-src.js:593)
Any ideas on what’s wrong?