1

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); 
  }
}
  • From your code (which cannot work) it's not clear what logic you have in mind. Please edit your question and explain the role of easy button. If it's constantly present on the map, how do you know when to press it? If you want it only to start location download then add it the map when location is found and remove it when location marker is removed from the map. – TomazicM Jun 5 at 18:30
  • 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. – luis Jun 7 at 10:18
  • I'm using the plugging leaflet-locatecontrol: lc = L.control.locate({ locateOptions: { enableHighAccuracy: true, showCompass: true, maxZoom: 15, strings: { title: "postion ??" }} }).addTo(map); – luis Jun 7 at 10:54
  • Please edit the question and add additional info from your two comments in the body of the question. It's hard for somebody who wants to answer the question to go through all the comments to have clear picture of the question. – TomazicM Jun 7 at 13:31
  • Sorry, although I have consulted many times the Stack Exchange pages is the first time I ask a question and I do not have very clear how to do it. I hope you can understand me now. Thanks – luis Jun 8 at 15:47
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);
  }
});

| improve this answer | |
  • Hi TomazicM It seems to work perfectly. I'm going to test it in the field and confirm it. Thanks – luis Jun 11 at 10:16
  • If answer helped you solve your problem, it's customary on GIS SE site to mark answer as accepted to let other users know that problem was succesfuly resolved. – TomazicM Jun 15 at 15:12
  • I've been testing it in the field and it works perfectly. It was just what I needed. Thanks – luis Jun 16 at 17:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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