|
2 | 2 | <head> |
3 | 3 | <link rel=" stylesheet" href=" https://unpkg.com/[email protected]/dist/leaflet.css" /> |
4 | 4 | <link rel="stylesheet" href="../../css/spectre.min.css"> |
| 5 | + <link rel="stylesheet" href="../../css/spectre-icons.min.css"> |
5 | 6 | <link rel=" stylesheet" href=" https://unpkg.com/[email protected]/dist/geosearch.css" /> |
6 | 7 | </head> |
7 | 8 | <style> |
|
34 | 35 | </div> |
35 | 36 | <div id="controls"> |
36 | 37 | <span id="select-hint">Click the map to select a location</span> |
37 | | - <button id="select" class="btn btn-primary" style="display:none">Save</button><br/> |
| 38 | + <button id="locate-me" class="btn" title="Locate me">⛯</button> |
| 39 | + <button id="locate-marker" class="btn" style="display:none" title="Locate marker"><i class="icon icon-location"></i></button> |
| 40 | + <button id="select" class="btn btn-primary" style="display:none" title="Save to device">Save</button><br/> |
38 | 41 | </div> |
39 | 42 |
|
40 | 43 | <script src="../../core/lib/interface.js"></script> |
|
76 | 79 | map.removeLayer(marker); |
77 | 80 | } |
78 | 81 | marker = new L.marker(latlon).addTo(map); |
| 82 | + |
79 | 83 | document.getElementById("select-hint").style.display="none"; |
80 | 84 | document.getElementById("select").style.display=""; |
| 85 | + document.getElementById("locate-marker").style.display=""; |
81 | 86 | } |
82 | 87 |
|
83 | 88 | map.on('click', function(e){ |
84 | 89 | setPosition(e.latlng); |
85 | 90 | }); |
86 | 91 |
|
| 92 | + function convertMapToFile(map) { |
| 93 | + return {lat: map.lat, lon: map.lng}; |
| 94 | + } |
| 95 | + |
| 96 | + function convertFileToMap(file) { |
| 97 | + return {lat: file.lat, lng: file.lon}; |
| 98 | + } |
| 99 | + |
| 100 | + document.getElementById("locate-me").addEventListener("click", function() { |
| 101 | + map.locate({setView: true, maxZoom: 16, enableHighAccuracy:true}); |
| 102 | + }); |
| 103 | + |
| 104 | + document.getElementById("locate-marker").addEventListener("click", function() { |
| 105 | + if (latlon && latlon.lng != null && latlon.lat != null) { |
| 106 | + map.setView(latlon); |
| 107 | + } |
| 108 | + }); |
| 109 | + |
87 | 110 | document.getElementById("select").addEventListener("click", function() { |
88 | | - let settings = {}; // {"lat":48.8566,"lon":2.3522,"location":"Paris"} |
89 | | - settings.lat = latlon.lat; |
90 | | - settings.lon = latlon.lng; |
| 111 | + let settings = convertMapToFile(latlon); // {"lat":48.8566,"lon":2.3522,"location":"Paris"} |
91 | 112 | settings.location = "custom"; |
92 | 113 | Util.showModal("Saving..."); |
93 | 114 | Util.writeStorage("mylocation.json", JSON.stringify(settings), ()=>{ |
|
101 | 122 | Util.readStorageJSON("mylocation.json", function(data) { |
102 | 123 | if (data===undefined) return; // no file |
103 | 124 | try { |
104 | | - setPosition(data); |
| 125 | + setPosition(convertFileToMap(data)); |
105 | 126 | } catch (e) { |
106 | 127 | console.error(e); |
107 | 128 | } |
|
0 commit comments