currentLocation.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Display a marker at current location</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.js"></script>
    <link href="https://cdn.maptiler.com/maplibre-gl-js/v2.4.0/maplibre-gl.css" rel="stylesheet" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const key = '6t11E2KvYHHpG18j21jN';
        const map = new maplibregl.Map({
            container: 'map',
            style: `https://api.maptiler.com/maps/streets-v2/style.json?key=${key}`,
            center: [0.11, 51.49],
            zoom: 6
        });

        // Get Current Location
        navigator.geolocation.getCurrentPosition(function(position) {
            var lon = position.coords.longitude;
            var lat = position.coords.latitude;

            // Update Map to Current Location
            map.flyTo({
                center: [lon, lat],
                zoom: 12
            });

            // Add Marker for Current Location
            var marker = new maplibregl.Marker()
                .setLngLat([lon, lat])
                .addTo(map);
        }, function(error) {
            console.error('Error getting current location:', error);
        });

        map.on('error', function(err) {
            throw new Error("To load the map, you must replace YOUR_MAPTILER_API_KEY_HERE first, see README");
        });
    </script>
</body>
</html>