Manipulating data with a Handsontable spreadsheet in a Leaflet GeoJSON Layer and rerender the map

Question

The goal is to add a spreadsheet view to a GeoJSON Layer to comfty edit the properties directly in the spreadsheet and the location (lat/long) within the map by dragging the marker with leaflet.draw.
For the speadsheet functionality i found a nice lib called Handsontable:
https://github.com/handsontable/handsontable
Handsontable works with array so I push the properties data  with onEachFeature in the array tableEditArray and in the Leaflet Layer called drawnItems and bind a mouseover event on the marker to view the data:
onEachFeature: function(feature, layer) {    
                       tableEditArray.push(feature.properties); 
                       drawnItems.addLayer(layer);
                       layer.on('mouseover', function_to_view_properties);
                }

Then I add drawnItems to the map and initialise a Handsontable with the data from the array tableEditArray.
So far, so good, the map is drawn and the spreadsheet is editable:

If the user edits a cell in the sheet, how can I update the drawnItems Layer and rerender the map?

Baba Wanga · Answer

I do answer my own question if someone with the same question finds this topic:
1: In the handsontable intit:
 afterChange: function (changes, src) {
                    if (src !== 'loadData') {
                     
                        var editedRow = this.getDataAtRow(changes[0][0]);

for (key in drawnItems._layers) {
                            var myID = drawnItems._layers[key].feature.properties["location_id"];
                            if (myID == editedRow[0]) {
                                console.log(editedRow[0] + "found!");
                                // now edit the object
                                drawnItems._layers[key].feature.properties.location_name = editedRow[1];
                                drawnItems._layers[key].feature.properties.location_desc = editedRow[2];
                            }
                         
                        };

}
                }

so after a change in the spreadsheet the leaflet layer is modified and the binded popups are up to date without rerender the layer!
Cheers to everyone!

Manipulating data with a Handsontable spreadsheet in a Leaflet GeoJSON Layer and rerender the map

One Answer

Add your own answers!

Ask a Question