Make a Compass to show direction to closest GeoKeys

2024-03-29 12:37:46 +01:00 · 2024-03-29 12:37:46 +01:00 · a0046d31e0
parent 5e9cebfbac
commit a0046d31e0
1 changed files with 133 additions and 0 deletions
--- a/templates/UPlanetCompass/index.html
+++ b/templates/UPlanetCompass/index.html
@ -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>