How to save markers position to localStorage in leaflet?

Question

I am trying new to localStorage, and I am trying to save the markers that the user can create on the map.

I created this function to place markers and delete them:

var redmarker = L.icon({
iconUrl: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/48/map-marker-icon.png',

       iconSize:     [48, 48], // size of the icon
       iconAnchor:   [24, 48], // point of the icon which will correspond to marker's location
       popupAnchor:  [-2, -48] // point from which the popup should open relative to the iconAnchor
                        });

        var popup = L.popup();

        // On map click shows coordinates X, Y
        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: true,
                icon: redmarker


              }).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);

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

        function onPopupOpen() {
          var tempMarker = this;

          $("#marker-delete-button:visible").click(function () {
            map.removeLayer(tempMarker);
          });
        }

        map.on('click', onMapClick);

I am not familiar with localStorage, this is new to me. Also I am trying to make the popup editable, an user input there for the user name the marker. I saw this example of input:

http://tahvel.info/simpleStorage/example/

Something like that.

A working example of my function: http://fiddle.jshell.net/2g4h5eu5/1/

Can someone help me save the markers in localStorage? Also my problem is that I don't know what render's the markers on leaflet after I click, so I don't know exactly what I need to save in local storage to retrieve those markers.

Answer 1

you can use the following functions to manage your localStorage

localStorage.setItem('favoriteflavor','vanilla');

var taste = localStorage.getItem('favoriteflavor'); // -> "vanilla"

localStorage.removeItem('favoriteflavor'); var taste = localStorage.getItem('favoriteflavor'); // -> null

check this link also you can use jQuery Storage API plugin to make things more cross-browser

http://fiddle.jshell.net/thesane/2g4h5eu5/29/

/// 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: redmarker


                            }).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));
}

// Delete Marker
function deleteMarker(lng, lat) {
  var markers = localStorage.getItem("markers");
  markers = JSON.parse(markers);
   for(var i=0;i<markers.length;i++){
    latlng = JSON.parse(markers[i]);

    if(latlng.lat == lat && latlng.lng == lng)
    {
        markers.splice(i,1);

    }
  }
  localStorage.setItem('markers', JSON.stringify(markers));
}