<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Your Location on a Map</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
/>
</head>
<body>
<h1>Your Location on a Map</h1>
<div id="map" style="height: 400px"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
const map = L.map("map").setView([lat, lon], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution: "© OpenStreetMap contributors",
}).addTo(map);
L.marker([lat, lon])
.addTo(map)
.bindPopup("You are here!")
.openPopup();
});
} else {
document.getElementById("map").textContent =
"Geolocation is not supported by your browser.";
}