Adding buttons inside Leaflet popup

Question

I got a problem when I try to add buttons inside a Leaflet popup. The popup is generated when you click on the map.

Ideally I want to popuo to show 2 buttons:

start from Here
and go to this location

This sketch is an example of the result I want:

 ________________________________________________
|You clicked the map at LatLng(XXXXX,XXXXX)      |
|  ---------------    -------------------        |
| |Start from here|  |Go to this location|       |
|  ---------------    -------------------        |
|___________________  ___________________________|
                   \/

this is what I get inside my popUp : You clicked the map at LatLng(XXXXX,XXXX) [object HTMLButtonElement]

I am trying to create the buttons using L.domUtil

defineYourWaypointOnClick(e: any) {

var choicePopUp = L.popup();
var container = L.DomUtil.create('div'),
  startBtn = this.createButton('Start from this location', container),
  destBtn = this.createButton('Go to this location', container);

choicePopUp
  .setLatLng(e.latlng)
  .setContent('You clicked the map at ' + e.latlng.toString() + '<br>' + startBtn)
  .openOn(this.map);

L.DomEvent.on(startBtn, 'click', () => {
  alert("toto");
});

L.DomEvent.on(destBtn, 'click', () => {
  alert("tata");
});
}

createButton(label: string, container: any) {
    var btn = L.DomUtil.create('button', '', container);
    btn.setAttribute('type', 'button');
    btn.innerHTML = label;
    return btn;
}

I call my method from here :

this.map.on('click', (e: any) => {
  this.defineYourWaypointOnClick(e);
});

Thank you in advance for any help you can give me :)

score 4 · Accepted Answer · answered Mar 04 '17 at 18:14

4

You should be using innerHTML to add buttons to your leaflet as below

defineYourWaypointOnClick(e: any) {

var choicePopUp = L.popup();
var container = L.DomUtil.create('div');
//////////////////////////////////////////////////////////////////////////////////////////////
///////////modified here
startBtn = this.createButton('Start from this location', container),
destBtn = this.createButton('Go to this location', container);
div.innerHTML = ''+startBtn+ '&nbsp;&nbsp;&nbsp;&nbsp;' + destBtn ; 
//////////////////////////////////////////////////////////////////////////////////////////////

choicePopUp
  .setLatLng(e.latlng)
  .setContent('You clicked the map at ' + e.latlng.toString() + '<br>' + startBtn)
  .openOn(this.map);

L.DomEvent.on(startBtn, 'click', () => {
  alert("toto");
});

L.DomEvent.on(destBtn, 'click', () => {
  alert("tata");
});
}

createButton(label: string, container: any) {
var btn = L.DomUtil.create('button', '', container);
btn.setAttribute('type', 'button');
btn.innerHTML = label;
return btn;
}

answered Mar 04 '17 at 18:14

Aravind

40,391
16
91
110

2

`div` is undefined. `startBtn` and `destBtn` are still HTML Elements, not strings. – ghybs Mar 04 '17 at 18:24
1

I just found out that my code works all I had to do is to put only the container inside the popUp: .setContent(container) – Uness Mar 04 '17 at 18:25
1

so my answer turns to be useless? – Aravind Mar 04 '17 at 18:31
no your answer works fine, I managed to get it work using innerHtml but since I am using leaflet I wanted to avoid using innerHTML – Uness Mar 04 '17 at 18:35
1

The code does not work since you cannot concatenate a DOM element and a string. But since the answer was marked as solved, I have created a revision to the code as mentioned in the comments as well. This is for others to see as well . I don't have time to create a fiddle but this should hopefully work. – Jereme Aug 06 '18 at 09:43
1

Jereme Causing is correct, neither code above is working ok, the problem is that mixing DOM element and String ends up something like "Your clicked map at ... [ObjectButtonInputElement]" instead of the correct object. I don't know why they did not have this problem. To work ok I use the .appendChild to nest a object in a another one (button to container). – Ualter Jr. Apr 15 '19 at 09:27

Adding buttons inside Leaflet popup

1 Answers1

Linked

Related