w3collective/geolocation.html

## geolocation.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Using the HTML Geolocation API to display a users location on a map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>

<body>
  <div id="map" style="height: 500px"></div>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  <script>
    (() => {

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
      } else {
        alert("Geolocation is not supported by this browser");
      }

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

      function error() {
        alert("Unable to retrieve location");
      }

      function getMap(latitude, longitude) {
        const map = L.map("map").setView([latitude, longitude], 5);
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
        L.marker([latitude, longitude]).addTo(map);
      }

    })();
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Using the HTML Geolocation API to display a users location on a map</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
	</head>

	<body>
	<div id="map" style="height: 500px"></div>
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	<script>
	(() => {

	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(success, error);
	} else {
	alert("Geolocation is not supported by this browser");
	}

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

	function error() {
	alert("Unable to retrieve location");
	}

	function getMap(latitude, longitude) {
	const map = L.map("map").setView([latitude, longitude], 5);
	L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
	L.marker([latitude, longitude]).addTo(map);
	}

	})();
	</script>
	</body>

	</html>