Update properties in POPUP , with leaflet and geoJson

Question

I've made a script based on : update properties of geojson to use it with leaflet

But I have an issue with multiple arguments.. I'd like to put 2 separate variables like:

layer.feature.properties.desc = content.value;
layer.feature.properties.number = content2.value;

But

layer.bindPopup(content).openPopup()

can open only one - "content", there is an error when I put for example:

layer.bindPopup(content + content2).openPopup();

>>> Picture

So I made another script:

function addPopup(layer)
{let popupContent = 
'<form>' + 
'Description:<br><input type="text" id="input_desc"><br>' +
'Name:<br><input type="text" id="input_cena"><br>' +
'</form>';

layer.bindPopup(popupContent).openPopup();
document.addEventListener("keyup", function() {

link = document.getElementById("input_desc").value;
cena = document.getElementById("input_cena").value;

layer.feature.properties.link = link;
layer.feature.properties.cena = cena;   
}); 
};

>>>Picture

But unfortunately:

layer.feature.properties.link = link;
layer.feature.properties.cena = cena;

Is the same for each drawn geometry. Moreover when user fill the form, the arguments will dissaper just after close PopUp.. With update properties of geojson to use it with leaflet script inscribed argument is visible each time when user "click" on PupUp

Can any one help me on this?

Falke Design · Accepted Answer · 2020-11-01T20:29:56.233

0

You have to add the listener in the popupopen event. Change your addPopup function to:


var openLayer;
function addPopup(layer){
  let popupContent = 
  '<form>' + 
  'Description:<br><input type="text" id="input_desc"><br>' +
  'Name:<br><input type="text" id="input_cena"><br>' +
  '</form>';
  
  layer.bindPopup(popupContent).openPopup();
  
  layer.on("popupopen", function (e) {
    var _layer = e.popup._source;
    if(!_layer.feature){
        _layer.feature = {
        properties: {}
      };
    }
    document.getElementById("input_desc").value = _layer.feature.properties.link || "";
    document.getElementById("input_cena").value = _layer.feature.properties.cena || "";
    document.getElementById("input_desc").focus();
    openLayer = _layer;
  });
  
  layer.on("popupclose", function (e) {
    openLayer = undefined;
  })
  
};

L.DomEvent.on(document,"keyup",function(){
  if(openLayer){
    link = document.getElementById("input_desc").value;
    cena = document.getElementById("input_cena").value;

    openLayer.feature.properties.link = link;
    openLayer.feature.properties.cena = cena;   
  }
})

https://jsfiddle.net/falkedesign/ntvzx7cs/

edited Nov 01 '20 at 20:29

answered Nov 01 '20 at 16:26

Falke Design

10,635
3
15
30

Thank your for the answer but script above still give same values for each geometry. Let me know if it is posible to edit code belowe adding 2nd textarea : `code` function addPopup(layer) { var content = document.createElement(["textarea"]); var y = document.createElement(["textarea"]); content.addEventListener("keyup", function () { layer.feature.properties.link = content.value; }); layer.bindPopup(content).openPopup(); } – Mateusz Kruk Nov 01 '20 at 19:42
@MateuszKruk yeah you are right, it was wrong. I updated the code and fixed the example – Falke Design Nov 01 '20 at 20:30
Thank you, it works!. But let me know is it possible to modify the code below with the same result ? I mean double text area for 2 separate properies? [link] https://jsfiddle.net/mattiaccat/1ufa2cyw/1/ [link] – Mateusz Kruk Nov 02 '20 at 06:50
Here: [Link](https://jsfiddle.net/falkedesign/ntvzx7cs/) you have to change `input` to `textarea`. I recommand to use my code and not the code from your fiddle, because it makes it more difficult to add two DOM Elements (`createElement`) instead of adding html text. Please don't forget to accept this answer – Falke Design Nov 02 '20 at 06:56
Thank you for helping me and really quick answers! – Mateusz Kruk Nov 02 '20 at 07:16

Update properties in POPUP , with leaflet and geoJson

1 Answers1