forked from STI/Astroport.ONE
Make a Compass to show direction to closest GeoKeys
This commit is contained in:
parent
5e9cebfbac
commit
a0046d31e0
133
templates/UPlanetCompass/index.html
Normal file
133
templates/UPlanetCompass/index.html
Normal file
@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Compass</title>
|
||||
<style>
|
||||
#compass {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 2px solid black;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
}
|
||||
.needle {
|
||||
width: 2px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
#location-info {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="compass">
|
||||
<div id="needle-1" class="needle"></div>
|
||||
<div id="needle-2" class="needle"></div>
|
||||
<div id="needle-3" class="needle"></div>
|
||||
<div id="needle-4" class="needle"></div>
|
||||
<div id="needle-5" class="needle"></div>
|
||||
<div id="needle-6" class="needle"></div>
|
||||
<div id="needle-7" class="needle"></div>
|
||||
<div id="needle-8" class="needle"></div>
|
||||
</div>
|
||||
<div id="location-info"></div>
|
||||
|
||||
<script>
|
||||
function degreesToRadians(degrees) {
|
||||
return degrees * (Math.PI/180);
|
||||
}
|
||||
|
||||
function distanceBetweenCoords(lat1, lon1, lat2, lon2) {
|
||||
var earthRadiusKm = 6371;
|
||||
|
||||
var dLat = degreesToRadians(lat2-lat1);
|
||||
var dLon = degreesToRadians(lon2-lon1);
|
||||
|
||||
var a =
|
||||
Math.sin(dLat/2) * Math.sin(dLat/2) +
|
||||
Math.cos(degreesToRadians(lat1)) * Math.cos(degreesToRadians(lat2)) *
|
||||
Math.sin(dLon/2) * Math.sin(dLon/2);
|
||||
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
|
||||
var distance = earthRadiusKm * c;
|
||||
|
||||
return distance;
|
||||
}
|
||||
|
||||
function updateCompass(heading) {
|
||||
var needles = document.querySelectorAll('.needle');
|
||||
needles.forEach(function(needle) {
|
||||
needle.style.transform = `translateX(-50%) translateY(-50%) rotate(${heading}deg)`;
|
||||
});
|
||||
}
|
||||
|
||||
function showLocationInfo(latitude, longitude) {
|
||||
var infoElement = document.getElementById('location-info');
|
||||
infoElement.innerHTML = `Latitude: ${latitude.toFixed(5)}, Longitude: ${longitude.toFixed(5)}`;
|
||||
|
||||
// Calculate distances to key spots with different precisions
|
||||
var distances = {
|
||||
'Sector 1 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude + 0.01, longitude),
|
||||
'Sector 2 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude, longitude + 0.01),
|
||||
'Sector 3 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude - 0.01, longitude),
|
||||
'Sector 4 (0.01°)': distanceBetweenCoords(latitude, longitude, latitude, longitude - 0.01),
|
||||
'Region 1 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude + 0.1, longitude),
|
||||
'Region 2 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude, longitude + 0.1),
|
||||
'Region 3 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude - 0.1, longitude),
|
||||
'Region 4 (0.1°)': distanceBetweenCoords(latitude, longitude, latitude, longitude - 0.1)
|
||||
};
|
||||
|
||||
// Check proximity and open URL if less than 10 meters
|
||||
for (var key in distances) {
|
||||
var distance = distances[key];
|
||||
if (distance < 0.01) { // Less than 10 meters (0.01 in degrees is approximately 10 meters)
|
||||
window.open('https://example.com'); // Change URL to the desired one
|
||||
break; // Stop checking once a key spot within proximity is found
|
||||
}
|
||||
}
|
||||
|
||||
// Display distances
|
||||
for (var key in distances) {
|
||||
infoElement.innerHTML += `<br>${key}: ${distances[key].toFixed(2)} km`;
|
||||
}
|
||||
}
|
||||
|
||||
function getLocation() {
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
var latitude = position.coords.latitude;
|
||||
var longitude = position.coords.longitude;
|
||||
|
||||
showLocationInfo(latitude, longitude);
|
||||
|
||||
navigator.geolocation.watchPosition(function(position) {
|
||||
var newLatitude = position.coords.latitude;
|
||||
var newLongitude = position.coords.longitude;
|
||||
|
||||
var heading = Math.atan2(newLongitude - longitude, newLatitude - latitude) * (180 / Math.PI);
|
||||
updateCompass(heading);
|
||||
|
||||
showLocationInfo(newLatitude, newLongitude);
|
||||
|
||||
latitude = newLatitude;
|
||||
longitude = newLongitude;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
alert("Geolocation is not supported by this browser.");
|
||||
}
|
||||
}
|
||||
|
||||
getLocation();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user