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