jM} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="chrome-extension://lbjapbcmmceacocpimbpbidpgmlmoaao/content.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<title>Golf Distance App - Toggle Camera & Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#map, #camera {
height: 400px;
width: 100%;
margin: 10px 0;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
}
#distance {
font-size: 18px;
margin-top: 10px;
}
#controls {
margin-bottom: 15px;
}
#map {
display: block;
}
#camera {
display: none;
}
</style>
</head>
<body>
<!-- Controls for switching units, zooming, GPS/Beidou, and manually updating location -->
<div id="controls">
<label for="unitSwitch">Unit: </label>
<select id="unitSwitch">
<option value="meters">Meters</option>
<option value="yards">Yards</option>
</select>
<label for="zoomLevel">Zoom: </label>
<input type="number" id="zoomLevel" min="0" max="19" value="17">
<button onclick="setZoomLevel()">Zoom</button>
<!-- GPS/Beidou selection -->
<label for="locationSource">Location Source: </label>
<select id="locationSource">
<option value="gps">GPS</option>
<option value="beidou">Beidou</option>
</select>
<!-- Button for manually updating the location -->
<button onclick="manualUpdate()">Manual Update</button>
</div>
<div id="container">
<!-- Map Container -->
<div id="map"></div>
</div>
<p id="distance">Distance: 0 meters</p>
<script>
var map, userMarker, targetMarker, route;
var cameraEnabled = false;
var currentZoomLevel = 17;
var unit = 'meters';
// Initialize the map and center it on user's location
function initMap() {
map = L.map('map').setView([51.503, -0.09], currentZoomLevel);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
}
// Function to set zoom level based on user input
function setZoomLevel() {
var zoomLevel = document.getElementById('zoomLevel').value;
zoomLevel = Math.min(19, Math.max(0, zoomLevel)); // Clamp value between 0 and 19
map.setZoom(zoomLevel);
}
// Function to get location based on selected GPS/Beidou
function getLocation() {
var locationSource = document.getElementById('locationSource').value;
if (locationSource === 'gps' || locationSource === 'beidou') {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {
enableHighAccuracy: true
});
} else {
alert("Geolocation is not supported by your browser.");
}
} else {
alert('Invalid location source selected.');
}
}
// Function to manually trigger the location update
function manualUpdate() {
getLocation(); // Reuse getLocation function for manual update
}
function updateLocation(position) {
var userLat = position.coords.latitude;
var userLon = position.coords.longitude;
// Center the map on the user's location
map.setView([userLat, userLon], currentZoomLevel);
// Update or add user marker
if (userMarker) {
userMarker.setLatLng([userLat, userLon]);
} else {
userMarker = L.marker([userLat, userLon], {draggable: true}).addTo(map)
.bindTooltip("You are here", {permanent: true, direction: 'top'}).openTooltip();
userMarker.on('drag', function(e) {
var newUserLat = e.target.getLatLng().lat;
var newUserLon = e.target.getLatLng().lng;
// Update polyline and distance when userMarker is dragged
var distance = calculateDistance(newUserLat, newUserLon, targetMarker.getLatLng().lat, targetMarker.getLatLng().lng);
// Convert distance to yards if selected
if (unit === 'yards') {
distance = distance * 1.09361;
}
// Update distance display
document.getElementById('distance').textContent = `Distance: ${distance.toFixed(2)} ${unit}`;
// Update the polyline to reflect the new userMarker position
route.setLatLngs([[newUserLat, newUserLon], [targetMarker.getLatLng().lat, targetMarker.getLatLng().lng]]);
});
}
if (!targetMarker) {
targetMarker = L.marker([userLat - 0.002, userLon + 0.002], {draggable: true}).addTo(map).bindPopup("Drag me!").openPopup();
}
if (!route) {
route = L.polyline([[userLat, userLon], [targetMarker.getLatLng().lat, targetMarker.getLatLng().lng]], {color: 'blue'}).addTo(map);
} else {
route.setLatLngs([[userLat, userLon], [targetMarker.getLatLng().lat, targetMarker.getLatLng().lng]]);
}
targetMarker.on('drag', function(e) {
var targetLat = e.target.getLatLng().lat;
var targetLon = e.target.getLatLng().lng;
var distance = calculateDistance(userMarker.getLatLng().lat, userMarker.getLatLng().lng, targetLat, targetLon);
if (unit === 'yards') {
distance = distance * 1.09361;
}
document.getElementById('distance').textContent = `Distance: ${distance.toFixed(2)} ${unit}`;
route.setLatLngs([[userMarker.getLatLng().lat, userMarker.getLatLng().lng], [targetLat, targetLon]]);
});
}
// Function to calculate distance using the Haversine formula
function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371e3; // Radius of Earth in meters
var Ï1 = lat1 * Math.PI / 180;
var Ï2 = lat2 * Math.PI / 180;
var ÎÏ = (lat2 - lat1) * Math.PI / 180;
var Îλ = (lon2 - lon1) * Math.PI / 180;
var a = Math.sin(ÎÏ / 2) * Math.sin(ÎÏ / 2) +
Math.cos(Ï1) * Math.cos(Ï2) *
Math.sin(Îλ / 2) * Math.sin(Îλ / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c; // Distance in meters
}
// Handle location errors (e.g., if the user denies access)
function handleLocationError(error) {
alert("Geolocation error: " + error.message);
}
// Initialize the map and get location
initMap();
getLocation();
// Event listener for unit switch
document.getElementById('unitSwitch').addEventListener('change', function() {
unit = document.getElementById('unitSwitch').value;
});
</script>
</body>
</html>
https://whatsonchain.com/tx/undefined