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) {    
                       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:

enter image description here

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


1 Answer 1


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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.