gps3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website with Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        /* General styles for the body */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* Styles for the map container */
        #map {
            width: 100%;
            height: 600px; /* Height of the map */
            margin: 20px 0; /* Space around the map */
        }

        /* Additional styles for layout */
        header {
            background: #000000;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }

        
    </style>
</head>
<body>

    <header>
        <h2>Your Current Location</h2>
    </header>

    <div id="map"></div>


    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([0, 0], 2); // Center the map

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

        var userMarker;

        function onLocationFound(e) {
            if (userMarker) {
                map.removeLayer(userMarker); // Remove previous marker
            }
            
            var radius = e.accuracy / 2;
            userMarker = L.marker(e.latlng).addTo(map)
                .bindPopup("You are within " + radius + " meters from this point")
                .openPopup();

            L.circle(e.latlng, radius).addTo(map);
            map.setView(e.latlng, 13);
        }

        function onLocationError(e) {
            alert(e.message);
        }

        map.locate({setView: true, maxZoom: 16});
        map.on('locationfound', onLocationFound);
        map.on('locationerror', onLocationError);
    </script>
</body>
</html>