CODEWITHSUNDEEP
angularleafletpopup
Ahmad313
Ahmad313

Reputation: 57

Angular 8 Leaflet popup trigger function from popup elements

I know that this topic has been discussed over and over in stack questions, Pardon my ignorance as it got way too complicated from my skill level.

All I am aiming to do is: click on link or button inside leaflet popup to trigger a function (my aim is to open a dialog from that button)

I have seen very few examples using typescript and wasn't able to adapt most javascript ones.

Here is the last thing I tried:

this.map.on('contextmenu', (e) => {
const content = L.DomUtil.create('div', 'content');
L.DomEvent.on(content, 'click', (event) => {
  console.log('test');
});
const popup = L.popup().setContent(content).setLatLng(e.latlng);
this.map.openPopup(popup);
});
}

Any suggestion on how to set the content of the popup in Typescript to call a function is most welcome

Upvotes: 1

Views: 2001

Answers (1)

Ahmad313
Ahmad313

Reputation: 57

Finally, I was able to figure out a way of working it out. For those like me stuck with this issue, you can try the following:

const popup = L.popup().setContent('<button id="button-submit" type="button">Add Marker</button>').setLatLng(e.latlng);
this.map.openPopup(popup);
const buttonSubmit = L.DomUtil.get('button-submit');
L.DomEvent.addListener(buttonSubmit, 'click', (ee) => {
this.logTest();
});

Upvotes: 3

Related Questions