Export current user location from locate control using button in Leaflet

Question

I am preparing a mobile application, to determine the location of natural and cultural goods along a route that I have previously uploaded on Leaflet maps. I use the "leaflet locate control" plugin to establish my position and follow the route.

To capture the points of interest, and save them in a file along the route, I tried to use the code of TomazicM (Export user location in Leaflet) to export lat and lng, but "mousedown" doesn't work so well on mobiles. It works perfect in the computer and sometimes in the mobil.

What I've tried to do is change the "mousedown" option to a button that performs the same function, but I haven't found the solution.

I want to use the button to save the coordinates of points of interest during a route. Just one point (my location) each time I press the button. How can I achieve this?

This is what I have tried so far but does not work:

lc = L.control.locate({
    locateOptions: {
              enableHighAccuracy: true,
    showCompass: true,      
    maxZoom: 15,    
    strings: {
            title: "position ??"
    }}
}).addTo(map);
var cnt;
L.easyButton('far fa-save', function(btn, map) {
  map.on('locationfound', function (evt) {
  setTimeout(function() {
    cnt = 0;     
      cnt++;
      if (cnt > 1) {
        cnt = 0;
        return;
      }

      saveAsLocalFile(JSON.stringify(evt.latlng), 'location.txt', 'text/plain;charset=utf-8');    
  }, 100);
});
}).addTo (map);

function saveAsLocalFile(data, filename, type) {
  var file = new Blob([data], {type: type});
  if (window.navigator.msSaveOrOpenBlob) // IE10+
    window.navigator.msSaveOrOpenBlob(file, filename);
  else { // Others
    var a = document.createElement("a");
    var url = URL.createObjectURL(file);
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);  
    }, 0); 
  }
}

Answer 1

If desired functionality is to save current location with save button when location is available from L.control.locate control, it makes sense to show save button only when L.control.locate is activated.

Activation of control and consequent retrieving of current location can be detected through standard map locationfound event. Problem is detecting deactivation of location control so that save button can be removed from the map, since there is no such native event neither in standard Leaflet neither in location control.

One way to detect locate control deactivation is to extend it, so that standard control's stop method also removes save button.

Relevant code could then look something like this:

var savedLatLng;

var easyButton = L.easyButton('fa-save', function(btn, map) {
   saveAsLocalFile(JSON.stringify(savedLatLng), 'location.txt', 'text/plain;charset=utf-8');
});

L.Control.MyLocate = L.Control.Locate.extend({
  stop: function () {
    easyButton.remove();
    L.Control.Locate.prototype.stop.call(this);
  }
});
L.control.myLocate = function (options) {
  return new L.Control.MyLocate(options);
};

lc = L.control.myLocate({
  strings: {
    title: "Show me where I am!"
  }
}).addTo(map);

map.on('locationfound', function (evt) {
  savedLatLng = evt.latlng;
  if (!map.hasLayer(easyButton)) {
    easyButton.addTo(map);
  }
});