JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map" style="width:450px;height:430px;"></div>

JavaScript

var style = { fillColor: '#000', fillOpacity: 0.1, strokeWidth: 0 }
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.OSM("OpenStreetMap");
var vector = new OpenLayers.Layer.Vector('CircleLayer');
map.addLayers([layer, vector]);

map.setCenter(new OpenLayers.LonLat(0, 0), 12);

var geolocate = new OpenLayers.Control.Geolocate({
    geolocationOptions: {
        enableHighAccuracy: false,
        maximumAge: 0,
        timeout: 7000
    }
});
map.addControl(geolocate);
geolocate.events.register("locationupdated",this,function(e) {
    vector.removeAllFeatures();
    var circle = new OpenLayers.Feature.Vector(
        OpenLayers.Geometry.Polygon.createRegularPolygon(
            new OpenLayers.Geometry.Point(e.point.x, e.point.y),
            e.position.coords.accuracy/2,
            40,
            0
        ),
        {},
        style
    );
    vector.addFeatures([
        new OpenLayers.Feature.Vector(
            e.point,
            {},
            {
                graphicName: 'cross',
                strokeColor: '#f00',
                strokeWidth: 2,
                fillOpacity: 0,
                pointRadius: 10
            }
        ),
        circle
    ]);
    map.zoomToExtent(vector.getDataExtent());
});
geolocate.events.register("locationfailed",this,function() {
    // could not geolocate
    alert("Geolocation failed or not accepted");
});

geolocate.watch = false;
geolocate.activate();