bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[mylocation] add locate & find marker buttons

master
Logan B 2024-12-21 21:01:12 -06:00
parent f28847ab4d
commit 8425b448d1
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/mylocation/interface.html
View File

@ -2,6 +2,7 @@
<head> <head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<link rel="stylesheet" href="../../css/spectre.min.css"> <link rel="stylesheet" href="../../css/spectre.min.css">
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.6.0/dist/geosearch.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.6.0/dist/geosearch.css"/>
</head> </head>
<style> <style>
@ -34,6 +35,8 @@
</div> </div>
<div id="controls"> <div id="controls">
<span id="select-hint">Click the map to select a location</span> <span id="select-hint">Click the map to select a location</span>
<button id="locate" class="btn" title="Center on your location"><i class="icon icon-location"></i></button>
<button id="find-marker" class="btn" style="display:none" title="Center on your marker"><i class="icon icon-flag"></i></button>
<button id="select" class="btn btn-primary" style="display:none">Save</button><br/> <button id="select" class="btn btn-primary" style="display:none">Save</button><br/>
</div> </div>
@ -76,10 +79,10 @@
map.removeLayer(marker); map.removeLayer(marker);
} }
marker = new L.marker(latlon).addTo(map); marker = new L.marker(latlon).addTo(map);
map.setView(latlon); // center on the marker
document.getElementById("select-hint").style.display="none"; document.getElementById("select-hint").style.display="none";
document.getElementById("select").style.display=""; document.getElementById("select").style.display="";
document.getElementById("find-marker").style.display="";
} }
map.on('click', function(e){ map.on('click', function(e){
@ -94,7 +97,17 @@
return {lat: file.lat, lng: file.lon}; return {lat: file.lat, lng: file.lon};
} }
document.getElementById("select").addEventListener("click", function(e) { document.getElementById("locate").addEventListener("click", function() {
map.locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
});
document.getElementById("find-marker").addEventListener("click", function() {
if(latlon && latlon.lng && latlon.lat) {
map.setView(latlon);
}
});
document.getElementById("select").addEventListener("click", function() {
let settings = convertMapToFile(latlon); // {"lat":48.8566,"lon":2.3522,"location":"Paris"} let settings = convertMapToFile(latlon); // {"lat":48.8566,"lon":2.3522,"location":"Paris"}
settings.location = "custom"; settings.location = "custom";
Util.showModal("Saving..."); Util.showModal("Saving...");