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

#### Geographic Coordinates

geographic 4

#####

Using geographic coordinates for the map view.

Calling the `useGeographic` function in the `'ol/proj'` module makes it so the map view uses geographic coordinates (even if the view projection is not geographic).

##### main.js

    import Feature from 'ol/Feature.js';
    import Map from 'ol/Map.js';
    import Overlay from 'ol/Overlay.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 {useGeographic} from 'ol/proj.js';
    import OSM from 'ol/source/OSM.js';
    import VectorSource from 'ol/source/Vector.js';

    useGeographic();

    const place = [-110, 45];

    const point = new Point(place);

    const map = new Map({
      target: 'map',
      view: new View({
        center: place,
        zoom: 8,
      }),
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        new VectorLayer({
          source: new VectorSource({
            features: [new Feature(point)],
          }),
          style: {
            'circle-radius': 9,
            'circle-fill-color': 'red',
          },
        }),
      ],
    });

    const element = document.getElementById('popup');

    const popup = new Overlay({
      element: element,
      stopEvent: false,
    });
    map.addOverlay(popup);

    function formatCoordinate(coordinate) {
      return `
        <table>
          <tbody>
            <tr><th>lon</th><td>${coordinate[0].toFixed(2)}</td></tr>
            <tr><th>lat</th><td>${coordinate[1].toFixed(2)}</td></tr>
          </tbody>
        </table>`;
    }

    const info = document.getElementById('info');
    map.on('moveend', function () {
      const view = map.getView();
      const center = view.getCenter();
      info.innerHTML = formatCoordinate(center);
    });

    let popover;
    map.on('click', function (event) {
      if (popover) {
        popover.dispose();
        popover = undefined;
      }
      const feature = map.getFeaturesAtPixel(event.pixel)[0];
      if (!feature) {
        return;
      }
      const coordinate = feature.getGeometry().getCoordinates();
      popup.setPosition([
        coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
        coordinate[1],
      ]);

      popover = new bootstrap.Popover(element, {
        container: element.parentElement,
        content: formatCoordinate(coordinate),
        html: true,
        offset: [0, 20],
        placement: 'top',
        sanitize: false,
      });
      popover.show();
    });

    map.on('pointermove', function (event) {
      const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
      map.getViewport().style.cursor = type;
    });

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Geographic Coordinates</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
          td {
            padding: 0 0.5em;
            text-align: right;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map">
          <div id="popup"></div>
        </div>
        <div id="info"></div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

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