jM3 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golf Distance App - Toggle Camera & Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script type="text/javascript" src="chrome-extension://lbjapbcmmceacocpimbpbidpgmlmoaao/content.js"></script>
<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, and toggling between map and camera -->
<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>
</div>
<div id="container">
<!-- Map Container -->
<div id="map"></div>
</div>
<p id="distance">Distance: 0 meters</p>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map, userMarker, targetMarker, route;
var cameraEnabled = false; // Tracks if the camera is enabled
var currentZoomLevel = 17; // Default zoom level
var unit = 'meters'; // Default unit is meters
// Initialize the map and center it on user's location
function initMap() {
map = L.map('map').setView([51.503, -0.09], currentZoomLevel); // Centered map with user-defined zoom
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19, // Set maximum zoom level to 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);
}
// Geolocation function for GPS/Beidou positioning
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {
enableHighAccuracy: true
});
} else {
alert("Geolocation is not supported by your browser.");
}
}
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();
// Add drag event to userMarker to update polyline and distance when dragging
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; // Convert meters to yards
}
// 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]]);
});
}
// Set the target marker or update its position
if (!targetMarker) {
targetMarker = L.marker([userLat - 0.002, userLon + 0.002], {draggable: true}).addTo(map).bindPopup("Drag me!").openPopup();
}
// Draw or update the route line
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]]);
}
// Calculate and update distance and polyline when dragging the target marker
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); // Get updated userMarker position
// Convert distance to yards if selected
if (unit === 'yards') {
distance = distance * 1.09361; // Convert meters to yards
}
// Update distance display
document.getElementById('distance').textContent = `Distance: ${distance.toFixed(2)} ${unit}`;
// Update the polyline to the new marker position
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/6daafe62bfc256bc7f771d3e5370b021f3661d1b8dcf1b14252c46ffd0c001f0