<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caccia al Tesoro</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
// Inizializza la mappa
var map = L.map('map').setView([46.1691, 8.7983], 14); // Posizione iniziale
// Aggiunge il layer della mappa
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Ottiene la posizione dell'utente
function getUserLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(
function (position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// Mostra la posizione sulla mappa
L.marker([lat, lng]).addTo(map)
.bindPopup("Sei qui!").openPopup();
map.setView([lat, lng], 16);
},
function () { alert("Geolocalizzazione non consentita."); },
{ enableHighAccuracy: true }
);
} else {
alert("Geolocalizzazione non supportata.");
}
}
getUserLocation();
</script>
</body>
</html>