Leaflet: edit popupcontent

Question

Im looking foward to create a mobile leaflet application to collect data.

First i use the L.locate-control plugin to get my current location:

L.control.locate({
strings: {
    title: "current position"
},  
locateOptions: {
           timeout: 10000}                                                        
}).addTo(map);

Then i initialize a button with the L.EasyButton plugin to store the current location with a marker and add it to my layerGroup (places):

var places = new L.layerGroup();

L.easyButton('fa fa-thumb-tack', function(){
map.addOneTimeEventListener('locationfound', function (event) {
var marker = L.marker(event.latlng, {icon: smallIcon2}).addTo(places);
});
}).addTo(map);

In the end im using :

 document.getElementById('export').onclick = function(e) {

        var data = places.toGeoJSON();


        var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));


        document.getElementById('export').setAttribute('href', 'data:' + convertedData);
        document.getElementById('export').setAttribute('download','data.geojson');
    }

to export the marker position as a geojson data.

Everything works well so far!

Now im looking for a way to edit the popupcontent of a marker by clicking the marker and adding a value/text with the keyboard. Similiar to the way it is possible with leaflet.draw.

How to achieve this?

Answer 1

Solved it: i added a textarea and set the popup of the marker to the content value of the textarea.

Heres the final code for implemanting the features i was looking for:

L.easyButton('fa fa-thumb-tack', function(){

map.addOneTimeEventListener('locationfound', function (event) {
var marker = L.marker(event.latlng, {icon: smallIcon2}).addTo(places).addTo(map).on('click', onClick);
marker.properties = {};
var feature = marker.feature = marker.feature || {};
feature.type = "Feature";
feature.properties = feature.properties || {};
var content = document.createElement("textarea");

content.addEventListener("keyup", function () {
    feature.properties["Name"] = content.value;
});
marker.on("popupopen", function () {
    feature.properties["Name"] = content.value;
  content.focus();
});
marker.bindPopup(content).openPopup();

With the textarea field implemantation im able to add a value to the marker. By defining the feature.properties and setting its value to content.value im able to save the value to the marker. When exporting to geoJson it will be exported too.