This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Geolocation

geolocation 3 openstreetmap 22

#####

track position

position accuracy : `` altitude : `` altitude accuracy : `` heading : `` speed : ``

Using geolocation to control a map view.

This example uses the Geolocation API to control the view.

##### main.js

    import Feature from 'ol/Feature.js';
    import Geolocation from 'ol/Geolocation.js';
    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import Point from 'ol/geom/Point.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import OSM from 'ol/source/OSM.js';
    import VectorSource from 'ol/source/Vector.js';
    import CircleStyle from 'ol/style/Circle.js';
    import Fill from 'ol/style/Fill.js';
    import Stroke from 'ol/style/Stroke.js';
    import Style from 'ol/style/Style.js';

    const view = new View({
      center: [0, 0],
      zoom: 2,
    });

    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: 'map',
      view: view,
    });

    const geolocation = new Geolocation({
      // enableHighAccuracy must be set to true to have the heading value.
      trackingOptions: {
        enableHighAccuracy: true,
      },
      projection: view.getProjection(),
    });

    function el(id) {
      return document.getElementById(id);
    }

    el('track').addEventListener('change', function () {
      geolocation.setTracking(this.checked);
    });

    // update the HTML page when the position changes.
    geolocation.on('change', function () {
      el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
      el('altitude').innerText = geolocation.getAltitude() + ' [m]';
      el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
      el('heading').innerText = geolocation.getHeading() + ' [rad]';
      el('speed').innerText = geolocation.getSpeed() + ' [m/s]';
    });

    // handle geolocation error.
    geolocation.on('error', function (error) {
      const info = document.getElementById('info');
      info.innerHTML = error.message;
      info.style.display = '';
    });

    const accuracyFeature = new Feature();
    geolocation.on('change:accuracyGeometry', function () {
      accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
    });

    const positionFeature = new Feature();
    positionFeature.setStyle(
      new Style({
        image: new CircleStyle({
          radius: 6,
          fill: new Fill({
            color: '#3399CC',
          }),
          stroke: new Stroke({
            color: '#fff',
            width: 2,
          }),
        }),
      }),
    );

    geolocation.on('change:position', function () {
      const coordinates = geolocation.getPosition();
      positionFeature.setGeometry(coordinates ? new Point(coordinates) : null);
    });

    new VectorLayer({
      map: map,
      source: new VectorSource({
        features: [accuracyFeature, positionFeature],
      }),
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Geolocation</title>
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div id="info" style="display: none;"></div>
        <label for="track">
          track position
          <input id="track" type="checkbox"/>
        </label>
        <p>
          position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
          altitude : <code id="altitude"></code>&nbsp;&nbsp;
          altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
          heading : <code id="heading"></code>&nbsp;&nbsp;
          speed : <code id="speed"></code>
        </p>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "geolocation",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }