Geolocation with OpenLayers

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 })
});
var positionFeature = new ol.Feature();
positionFeature.setStyle(new ol.style.Style({
  image: new ol.style.Circle({ radius: 8, fill: new ol.style.Fill({ color: '#2196F3' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) })
}));
var accuracyFeature = new ol.Feature();
var locationLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [accuracyFeature, positionFeature] }) });
map.addLayer(locationLayer);
var geolocation = new ol.Geolocation({
  trackingOptions: { enableHighAccuracy: true },
  projection: map.getView().getProjection(),
  tracking: true
});
geolocation.on('change:position', function() {
  var coords = geolocation.getPosition();
  positionFeature.setGeometry(coords ? new ol.geom.Point(coords) : null);
  map.getView().animate({ center: coords, zoom: 15 });
});
geolocation.on('change:accuracyGeometry', function() {
  accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});

</script>
</body>
</html>

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) })
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 })
});
var positionFeature = new ol.Feature();
positionFeature.setStyle(new ol.style.Style({
  image: new ol.style.Circle({ radius: 8, fill: new ol.style.Fill({ color: '#2196F3' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) })
}));
var accuracyFeature = new ol.Feature();
var locationLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [accuracyFeature, positionFeature] }) });
map.addLayer(locationLayer);
var geolocation = new ol.Geolocation({
  trackingOptions: { enableHighAccuracy: true },
  projection: map.getView().getProjection(),
  tracking: true
});
geolocation.on('change:position', function() {
  var coords = geolocation.getPosition();
  positionFeature.setGeometry(coords ? new ol.geom.Point(coords) : null);
  map.getView().animate({ center: coords, zoom: 15 });
});
geolocation.on('change:accuracyGeometry', function() {
  accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
});