tomac4t · March 31, 2024 13:47
diff --git a/locate_me.html b/locate_me.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Locate Me</title>
 </head>
 <body>
  <button id="find-me">Locate</button>
  <p id="status"></p>
  <p>Longitude: <span id="lng"></span></p>
  <p>Latitude: <span id="lat"></span></p>
  <p>Address: <span id="address"></span></p>
  <script>
  function geoFindMe() {
    const status = document.querySelector("#status");
    const lngSpan = document.querySelector("#lng");
    const latSpan = document.querySelector("#lat");
    const addressSpan = document.querySelector("#address");

    function success(position) {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;

      status.textContent = "";
      lngSpan.textContent = longitude;
      latSpan.textContent = latitude;

      // Use Openstreetmap API to get address information
      const endpoint = `https://nominatim.openstreetmap.org/reverse.php?lat=${latitude}&lon=${longitude}&zoom=18&format=jsonv2`;
      fetch(endpoint)
        .then((response) => response.json())
        .then((data) => {
          addressSpan.textContent = data.display_name;
        })
        .catch((error) => {
          console.error(error);
        });
    }

    function error() {
      status.textContent = "Unable to get your location";
    }

    if (!navigator.geolocation) {
      status.textContent = "Your browser does not support geolocation";
    } else {
      status.textContent = "Locating...";
      navigator.geolocation.getCurrentPosition(success, error);
    }
  }

  document.querySelector("#find-me").addEventListener("click", geoFindMe);
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Locate Me</title>
	</head>
	<body>
	<button id="find-me">Locate</button>
	<p id="status"></p>
	<p>Longitude: <span id="lng"></span></p>
	<p>Latitude: <span id="lat"></span></p>
	<p>Address: <span id="address"></span></p>
	<script>
	function geoFindMe() {
	const status = document.querySelector("#status");
	const lngSpan = document.querySelector("#lng");
	const latSpan = document.querySelector("#lat");
	const addressSpan = document.querySelector("#address");

	function success(position) {
	const latitude = position.coords.latitude;
	const longitude = position.coords.longitude;

	status.textContent = "";
	lngSpan.textContent = longitude;
	latSpan.textContent = latitude;

	// Use Openstreetmap API to get address information
	const endpoint = `https://nominatim.openstreetmap.org/reverse.php?lat=${latitude}&lon=${longitude}&zoom=18&format=jsonv2`;
	fetch(endpoint)
	.then((response) => response.json())
	.then((data) => {
	addressSpan.textContent = data.display_name;
	})
	.catch((error) => {
	console.error(error);
	});
	}

	function error() {
	status.textContent = "Unable to get your location";
	}

	if (!navigator.geolocation) {
	status.textContent = "Your browser does not support geolocation";
	} else {
	status.textContent = "Locating...";
	navigator.geolocation.getCurrentPosition(success, error);
	}
	}

	document.querySelector("#find-me").addEventListener("click", geoFindMe);
	</script>
	</body>
	</html>