How to append button into popup in leaflet draw?

Question

I want button inside popup to make some action on popup attached layer.

 L.marker(coors[i], { icon })
          .addTo(this.drawnItem)
          .bindPopup(this._getCustomIcon(mix))
          .openPopup();

Below my _getCustomIcon()

 _getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    let CustomPopup = L.popup({ className: "customPopup" }).setContent(
      `<p> ${value}</p> ${delLayer}` //here is error
    );
    return CustomPopup;
  };

If you are using `reactjs` then I would suggest you to use `react-leaflet` (https://react-leaflet.js.org/). It will make eveything easier. To modify marker it is easy as this ` {city_name} centre ` — The_ehT, Sep 18 '19 at 11:44

score 3 · Accepted Answer · answered Sep 18 '19 at 11:56

3

Just use this code

 _getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    return delLayer;
  };

Your mistake is creating a popup after using bindPopup which already creates popup!

answered Sep 18 '19 at 11:56

Azam Rahimjonov

108
1
9

MH2K9 · Answer 2 · 2019-09-18T11:59:59.803

Here delLayer is an object but not a plain string. You should convert the element object to string using .outerHTML when you concatenate in string template literal

_getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    let CustomPopup = `<p> ${value}</p> ${delLayer.outerHTML}`;
    return CustomPopup;
};

Alternatively you may try using concatenate as a plain string like

let delLayer = '<button>Delete</button>'
let CustomPopup = `<p> ${value}</p> ${delLayer}`;

score 0 · Answer 3 · answered Sep 18 '19 at 11:46

0

You are mixing strings with objects, try <p> ${value}</p> <button>Delete</button>

answered Sep 18 '19 at 11:46

Vince

945
7
17

How to append button into popup in leaflet draw?

3 Answers3