2022-11-21 09:20:23 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
|
|
|
|
|
<link rel="stylesheet" href="../../css/spectre.min.css">
|
2024-12-22 03:01:12 +00:00
|
|
|
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
|
2022-11-21 09:20:23 +00:00
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.6.0/dist/geosearch.css"/>
|
|
|
|
|
</head>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
html, body, #map {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
#map { z-index: 1; }
|
|
|
|
|
#controls {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
position:absolute;
|
|
|
|
|
right:0px;top:0px;
|
|
|
|
|
background-color: rgb(255, 255, 255);
|
|
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
#maptiles {
|
|
|
|
|
width: 256px;
|
|
|
|
|
height: 256px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map">
|
|
|
|
|
</div>
|
|
|
|
|
<div id="controls">
|
2022-11-25 09:42:25 +00:00
|
|
|
<span id="select-hint">Click the map to select a location</span>
|
2024-12-22 21:37:55 +00:00
|
|
|
<button id="locate-me" class="btn" title="Locate me">⛯</button>
|
|
|
|
|
<button id="locate-marker" class="btn" style="display:none" title="Locate marker"><i class="icon icon-location"></i></button>
|
|
|
|
|
<button id="select" class="btn btn-primary" style="display:none" title="Save to device">Save</button><br/>
|
2022-11-21 09:20:23 +00:00
|
|
|
</div>
|
|
|
|
|
|
2022-11-25 09:42:25 +00:00
|
|
|
<script src="../../core/lib/interface.js"></script>
|
2022-11-21 09:20:23 +00:00
|
|
|
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
2022-11-21 12:16:27 +00:00
|
|
|
<script src="../../webtools/heatshrink.js"></script>
|
|
|
|
|
<script src="../../webtools/imageconverter.js"></script>
|
2022-11-21 09:20:23 +00:00
|
|
|
<script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var TILELAYER = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
|
|
|
|
|
|
|
|
|
|
var map = L.map('map').locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
|
|
|
|
|
var tileLayer = L.tileLayer(TILELAYER, {
|
|
|
|
|
maxZoom: 18,
|
|
|
|
|
attribution: 'Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
|
|
|
|
|
});
|
|
|
|
|
tileLayer.addTo(map);
|
|
|
|
|
|
|
|
|
|
// Search box:
|
|
|
|
|
const searchProvider = new window.GeoSearch.OpenStreetMapProvider();
|
|
|
|
|
const searchControl = new GeoSearch.GeoSearchControl({
|
|
|
|
|
provider: searchProvider,
|
|
|
|
|
style: 'button',
|
|
|
|
|
updateMap: true,
|
|
|
|
|
autoClose: true,
|
|
|
|
|
showMarker: false,
|
|
|
|
|
keepResult: true,
|
|
|
|
|
autoComplete: false
|
|
|
|
|
});
|
|
|
|
|
map.addControl(searchControl);
|
|
|
|
|
|
|
|
|
|
let latlon;
|
|
|
|
|
var marker;
|
2022-11-25 09:42:25 +00:00
|
|
|
|
|
|
|
|
function setPosition(ll) {
|
|
|
|
|
latlon = ll;
|
2022-11-21 09:20:23 +00:00
|
|
|
if (map.hasLayer(marker)) {
|
|
|
|
|
map.removeLayer(marker);
|
|
|
|
|
}
|
2022-11-25 09:42:25 +00:00
|
|
|
marker = new L.marker(latlon).addTo(map);
|
2024-12-22 02:21:44 +00:00
|
|
|
|
2022-11-25 09:42:25 +00:00
|
|
|
document.getElementById("select-hint").style.display="none";
|
2022-11-21 09:20:23 +00:00
|
|
|
document.getElementById("select").style.display="";
|
2024-12-22 21:37:55 +00:00
|
|
|
document.getElementById("locate-marker").style.display="";
|
2022-11-25 09:42:25 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
map.on('click', function(e){
|
|
|
|
|
setPosition(e.latlng);
|
2022-11-21 09:20:23 +00:00
|
|
|
});
|
|
|
|
|
|
2024-12-22 02:21:44 +00:00
|
|
|
function convertMapToFile(map) {
|
|
|
|
|
return {lat: map.lat, lon: map.lng};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function convertFileToMap(file) {
|
|
|
|
|
return {lat: file.lat, lng: file.lon};
|
|
|
|
|
}
|
|
|
|
|
|
2024-12-22 21:37:55 +00:00
|
|
|
document.getElementById("locate-me").addEventListener("click", function() {
|
2024-12-22 03:01:12 +00:00
|
|
|
map.locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
|
|
|
|
|
});
|
2024-12-22 19:45:49 +00:00
|
|
|
|
2024-12-22 21:37:55 +00:00
|
|
|
document.getElementById("locate-marker").addEventListener("click", function() {
|
|
|
|
|
if (latlon && latlon.lng != null && latlon.lat != null) {
|
2024-12-22 03:01:12 +00:00
|
|
|
map.setView(latlon);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById("select").addEventListener("click", function() {
|
2024-12-22 02:21:44 +00:00
|
|
|
let settings = convertMapToFile(latlon); // {"lat":48.8566,"lon":2.3522,"location":"Paris"}
|
2022-11-21 09:20:23 +00:00
|
|
|
settings.location = "custom";
|
|
|
|
|
Util.showModal("Saving...");
|
|
|
|
|
Util.writeStorage("mylocation.json", JSON.stringify(settings), ()=>{
|
|
|
|
|
Util.hideModal();
|
2022-11-25 09:42:25 +00:00
|
|
|
Util.close(); // close this window
|
2022-11-21 09:20:23 +00:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2022-11-25 09:42:25 +00:00
|
|
|
function onInit() {
|
|
|
|
|
// read existing location
|
2023-11-23 12:52:48 +00:00
|
|
|
Util.readStorageJSON("mylocation.json", function(data) {
|
2022-11-25 09:42:25 +00:00
|
|
|
if (data===undefined) return; // no file
|
|
|
|
|
try {
|
2024-12-22 02:21:44 +00:00
|
|
|
setPosition(convertFileToMap(data));
|
2022-11-25 09:42:25 +00:00
|
|
|
} catch (e) {
|
|
|
|
|
console.error(e);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-21 09:20:23 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
