Leaflet draw - adding actions to prefilled markers

Question

There are a bunch of markers which need to be loaded by default. The user can edit these markers and their corresponding properties in the popup window. The user can also add new markers and fill in their properties in a popup window.

Afterwards, both the new and the (edited) existing markers should be converted to geoJSON.

I've used this fiddle as a starting point: https://jsfiddle.net/gy5kp2k0/0/

Most of it is working, and adding new markers and saving them to json works perfectly. However, I'm having trouble adding the proper event listeners to my pre-existing markers, so they are also updated in the json when edited.

I understand that the problem is that I also need to update my layer.feature.properties, but I don't know how to reach them.

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {
        maxZoom: 18,
        attribution: osmAttrib
    });

map = L.map('map', {
    layers: [osm],
    center: [31.9500, 35.9333],
    zoom: 12
});
var drawnItems = L.geoJson().addTo(map);
map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems
    }
}));

map.on('draw:created', function (event) {
    var layer = event.layer
    var feature = layer.feature = layer.feature || {};
    feature.type = feature.type || "Feature";
    var props = feature.properties = feature.properties || {};
    props.desc = 'awesome description!';
    props.ara = 0;
    props.test = 'hey'
    drawnItems.addLayer(layer);
    addPopup(layer);
});

function createCustomElementFromProperties(properties){
  console.log('creating custom elements from properties')
    var content = document.createElement("div");
  for(var property in properties){
    var tmpnode = document.createElement("input");
    tmpnode.value = properties[property]
    tmpnode.j_type = property
    content.appendChild(tmpnode)
  }
  return content
}

function RetrieveObjFromCustomElement(custom_element){
  console.log('retrieving custom elements from properties...')
    var tmpobj = {};
  for(var i = 0; i < custom_element.childNodes.length; i++){
    var j_type = custom_element.childNodes[i].j_type
    tmpobj[j_type] = custom_element.childNodes[i].value
  }
  return tmpobj
}

function FillCustomElementFromProperties(tmpobject, custom_element){
  console.log('filling element with existing data...')
  for(var i = 0; i < custom_element.childNodes.length; i++){
    var j_type = custom_element.childNodes[i].j_type
    console.log(j_type, tmpobject[j_type])
    custom_element.childNodes[i].value = tmpobject[j_type]
  }
    return custom_element
}

function addPopup(layer) {
    var content = createCustomElementFromProperties(layer.feature.properties)
  content.addEventListener("keyup", function () {
    layer.feature.properties = RetrieveObjFromCustomElement(content);
    console.log(layer.feature.properties)
  });
  layer.on("popupopen", function () {
    console.log(layer.feature.properties)
    content = FillCustomElementFromProperties(layer.feature.properties, content);
    content.focus();
  });
  layer.bindPopup(content).openPopup();
}

document.getElementById("convert").addEventListener("click", function () {
  document.getElementById("some_paragraph").innerHTML = (JSON.stringify(drawnItems.toGeoJSON()));
});

var sample_geojson_string =  '{"type": "FeatureCollection", "features":[{"type": "Feature","geometry": {"type": "Point","coordinates": [35.961, 31.943]},"properties": {"desc": "Dinagat Islands", "ara": 10, "test": "blablabla"}}, {"type": "Feature","geometry": {"type": "Point","coordinates": [35.951, 31.933]},"properties": {"desc": "Some cool place", "ara": 101, "test": "tt"}}]}'

var sample_geojson = JSON.parse(sample_geojson_string)

for(var i = 0; i < sample_geojson.features.length; i++){
  var feature = sample_geojson.features[i]
  var items = L.geoJson(feature).addTo(map);
  var elem = createCustomElementFromProperties(feature.properties)
  elem.addEventListener("keyup", function(event){console.log('wow')})
  items.bindPopup(elem)
  drawnItems.addLayer(items)//addPopup(editableLayers)
}

Fiddle: https://jsfiddle.net/gy5kp2k0/12/

Answer 1

It was actually quite straightforward.

for(var i = 0; i < sample_geojson.features.length; i++){
  var feature = sample_geojson.features[i]
  var items = L.geoJson(feature).addTo(map);
  items.on('click', function(event){
    addPopup(event.layer)
  })
  drawnItems.addLayer(items)
}

Fiddle: https://jsfiddle.net/gy5kp2k0/14/

Any comments on my js are appreciated!