Leaflet markers on localstorage, how to get marker lat lng and exclude from storage?

Question

I created a function that on click places a marker on map, and save it to localstorage. Inside the marker popup, its displayed the marker position, and a delete button.

How I can make that delete button get actual marker position, compare to the ones stored in localstorage, and if find an equal value, delete it from local storage?

Using this:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}

I get the what's in localstorage, I noticed that the markers are saved with a "\", any way to improve this code?

["{\"lat\":1780,\"lng\":456}","{\"lat\":1280,\"lng\":904}","{\"lat\":1000,\"lng\":-132}","{\"lat\":216,\"lng\":300}"]

The code:

    function onMapClick(e) {

    var geojsonFeature = {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [e.latlng.lat, e.latlng.lng]
        }
    }

    var marker;

    L.geoJson(geojsonFeature, {

        pointToLayer: function(feature, latlng){

            marker = L.marker(e.latlng, {

            title: "Resource Location",
            alt: "Resource Location",
            riseOnHover: true,
            draggable: false,
            icon: totem

            }).bindPopup("<span>X: " + e.latlng.lng + ", Y: " + e.latlng.lat + "</span><br><a href='#' id='marker-delete-button'>Delete marker</a>");

            marker.on("popupopen", onPopupOpen);

            marker.on("dragend", function (ev) {

                var chagedPos = ev.target.getLatLng();
                this.bindPopup(chagedPos.toString()).openPopup();

            });

          // Begin store markers in local storage
          storeMarker(e.latlng);
          // End store markers in local storage

            return marker;
        }
    }).addTo(map);
}

function onPopupOpen() {
    var tempMarker = this;

    $("#marker-delete-button:visible").click(function () {

        map.removeLayer(tempMarker);
        localStorage.removeItem("markers");
    });
}

/// Load markers
function loadMarkers(){
    var markers = localStorage.getItem("markers");
    if(!markers) return;
    markers = JSON.parse(markers);
    markers.forEach(function(entry) {
        latlng = JSON.parse(entry);
            var geojsonFeature = {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Point",
                    "coordinates": [latlng.lat, latlng.lng]
                }
            }

        var marker;

        L.geoJson(geojsonFeature, {

            pointToLayer: function(feature){

                marker = L.marker(latlng, {

                    title: "Resource Location",
                    alt: "Resource Location",
                    riseOnHover: true,
                    draggable: true,
                    icon: totem


                }).bindPopup("<span>X: " + latlng.lng + ", Y: " + latlng.lat + "</span><br><a href='#' id='marker-delete-button'>Delete marker</a>");

                marker.on("popupopen", onPopupOpen);

                return marker;
            }
        }).addTo(map);
    });
}
/// Store markers
function storeMarker(marker){

    var markers = localStorage.getItem("markers");
    if(!markers) {
        markers = new Array();
        console.log(marker);
        markers.push(JSON.stringify(marker));
    }
    else
    {
        markers = JSON.parse(markers);
        markers.push(JSON.stringify(marker));
    }
    console.log(JSON.stringify(markers));
    localStorage.setItem('markers', JSON.stringify(markers));
}


    map.on('click', onMapClick);

    loadMarkers();

To your question about the \, your data is already in JSON form, so when you get it from localStorage and run stringify it on again, you are turning JSON into JSON. Don't. — Raymond Camden, Feb 26 '16 at 14:47
So, in loadmarkers function I have to remove this line: `markers = JSON.parse(markers);`? — RogerHN, Feb 26 '16 at 16:08

score 0 · Answer 1 · edited May 23 '17 at 12:23

You seem to be confused about what locaStorage is/does, it stores data as key:value pairs, so what you have there is basically a list of stuff where you have:

key: \"lat\":1780,
value: \"lng\":456

As for deleting geoJSON features, a possibility is to use is the function onEachFeature() that can bind a function to geoJSON features before they are added to the map, so perhaps you can use that to bind a delete function when the delete button of the popup is clicked but while it can remove the layer from the map, it will not wipe the data from localStorage as leaflet as no way of referencing the data there.

Another possibility is to add unique id's to your points when creating them so you can reference them more easily when you want to remove them from database.

Leaflet markers on localstorage, how to get marker lat lng and exclude from storage?

1 Answers1