How to replace old geometry with new geometry in localStorage using Google Maps API?

Question

I have 2 data layers on my Google Map: savedLayer (used for displaying/loading saved data on the map), and drawLayer (used for drawing on the map).

I'm currently able to store a drawn polygon on the map in localStorage using the Save button, and then display it on the map from localStorage.

What I'm struggling with is updating localStorage with any changes that are made to a particular polygon afterwards. Let's say you draw 3 or 4 polygons (I assign unique IDs to them). How do I update the geometry in localStorage for the selected polygon? How do I remove it? I basically want to send new updates of that polygon to localStorage once Saved is clicked.

I know there's a setgeometry event that I can use, and I'm currently using that to detect when the a geometry in savedLayer changes, but am struggling with replacing the old geometry with the new one:

changedGeom = savedLayer.addListener('setgeometry', function(e) {
    console.log('changed geometry for polygon #' + e.feature.getProperty('featureID'));
    console.log(e.newGeometry);
});

JSFiddle - http://jsfiddle.net/h0f3ycf4

PS You can currently delete/remove polygons from map using right-click on your mouse. But once I hit Save, this change is not reflected in localStorage.

Full JS:

var map, data, drawLayer, savedLayer, changedGeom;
var currentID = 0;
var uniqueID = function() {
    return ++currentID;
}

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -33.865143,
            lng: 151.209900
        },
        zoom: 16,
        clickableIcons: false,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false
    });

    drawLayer = new google.maps.Data({
        map: map
    });
    savedLayer = new google.maps.Data({
        map: map
    });
    drawLayer.setControls(['Polygon']);
    drawLayer.setStyle({
        editable: true,
        draggable: true
    });
    bindDataLayerListeners(drawLayer);
    savePolygons(drawLayer);
    loadPolygons(savedLayer);
}

function bindDataLayerListeners(drawLayer) {
    drawLayer.addListener('addfeature', function(e) {
        e.feature.setProperty('featureID', uniqueID());
    });

    drawLayer.addListener('mouseover', function(e) {
        drawLayer.revertStyle();
        drawLayer.overrideStyle(e.feature, {
            fillOpacity: 0.5,
            editable: true,
            draggable: true
        });
    });
}

function loadPolygons(map) {
    data = JSON.parse(localStorage.getItem('geoData'));

    savedLayer.forEach(function(f) {
        savedLayer.remove(f);
    });

    savedLayer.addGeoJson(data);

    savedLayer.addListener('mouseover', function(e) {
        savedLayer.revertStyle();
        savedLayer.overrideStyle(e.feature, {
            fillOpacity: 0.5,
            editable: true,
            draggable: true
        });
    });

    map.addListener('click', function() {
        savedLayer.revertStyle();
    });

    savedLayer.addListener('rightclick', function(e) {
        data = JSON.parse(localStorage.getItem('geoData'));
        data.features = data.features.filter(function(feature) {
            return feature.properties.featureID !== e.feature.getProperty('featureID');
        });
        savedLayer.remove(e.feature);
    });

    changedGeom = savedLayer.addListener('setgeometry', function(e) {
        console.log('changed geometry for polygon #' + e.feature.getProperty('featureID'));
        console.log(e.newGeometry);
    });
}

function savePolygons(json) {
    var btn = document.getElementById('save-edits');
    btn.onclick = function() {
        // if (changedGeom) {
        // console.log('geometry was changed and updated');
        //savedLayer.addListener('setgeometry', savePolygon);
        // } else {
        // if (json.features.length === 0) {
        // console.log('nothing to save');
        // } else {
        drawLayer.toGeoJson(function(json) {
            localStorage.setItem('geoData', JSON.stringify(json));
            alert('Saved to localStorage');
        });
        //  }
        // }
    };
}
initMap();

Answer 1

I didn't spend a lot of time to read your code and I didn't get the point of using two layers instead of one layer. With some console.log() statements I realized that you are always saving drawLayer to localStorage and that's why you miss saved/updated data.

I forked your jsfiddle HERE and did small modifications in savePolygons() method and seems that it is working now as expected.

In short words I make sure that I'm saving the data from drawLayer and savedLayer to localStorage so we don't miss anything.

Just for reference:

function savePolygons(json) {
    var btn = document.getElementById('save-edits');
    btn.onclick = function() {

        var drawLayerData, savedLayerData;

        drawLayer.toGeoJson(function(json) {

            console.log('saving geo data drawLayer ...')
            console.log(json);
            drawLayerData = json;

            if(typeof savedLayerData != 'undefined'){
                json.features = json.features.concat(savedLayerData.features)
                localStorage.setItem('geoData', JSON.stringify(json));
                alert('Data was saved');
            }
        });

        savedLayer.toGeoJson(function(json) {

            console.log('saving geo data savedLayer ...')
            console.log(json);
            savedLayerData = json;

            if(typeof drawLayerData != 'undefined'){
                json.features = json.features.concat(drawLayerData.features)
                localStorage.setItem('geoData', JSON.stringify(json));
                alert('Data was saved');
            }
        });
    };
}