[GIS] How to update geojson properties using popup leaflet

geojsonjavascriptleafletweb-mapping

I have GeoJSON file named json_point2. This file holds point data as follows:

var json_point2={
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "Class": null }, "geometry": { "type": "Point", "coordinates": [ 40.193168611061743, 40.904508523555492 ] } },
{ "type": "Feature", "properties": { "Class": null }, "geometry": { "type": "Point", "coordinates": [ 40.191358449981372, 40.902051540140285 ] } },

When I click this point on my web apps, I want to enter input value on popup and save this value geojson Class properties.

I can click on the point with the following code and enter the attribute. But he does not record it in his database.

My code:

map.createPane('pane_point2');
map.getPane('pane_point2').style.zIndex = 602;
map.getPane('pane_point2').style['mix-blend-mode'] = 'normal';
var layer_point2 = new L.geoJson(json_point2, {
    attribution: '<a href=""></a>',
    pane: 'pane_point2',
    onEachFeature: function (feature, layer) {
        var input = L.DomUtil.create('input', 'my-input');
        input.value = feature.properties.Class;
        L.DomEvent.addListener(input, 'change', function () {
            feature.properties.Class = input.value;
        });
        layer.bindPopup(input);

    }   
}).addTo(map);

Best Answer

The new L.geoJson(json_point2... just loads the geojson content and create an instance of L.geoJson object. It is normal the modifications of the L.geoJon does not affect the initial JSON variable.

Somewhere in your code, you have to call :

var new_json_point2 = layer_point2.toGeoJSON();

to get a JSON representation of the layer_point2 layer.

Related Question