Additional changes to work with user projection

examples/geographic.js

@@ -1,8 +1,9 @@
 import {useGeographic} from '../src/ol/proj.js';
-import {Map, View, Feature} from '../src/ol/index.js';
+import {Map, View, Feature, Overlay} from '../src/ol/index.js';
 import {Point} from '../src/ol/geom.js';
 import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Style, Circle, Fill} from '../src/ol/style.js';
 
 useGeographic();
 
@@ -25,14 +26,64 @@ const map = new Map({
         features: [
           new Feature(point)
         ]
+      }),
+      style: new Style({
+        image: new Circle({
+          radius: 9,
+          fill: new Fill({color: 'red'})
+        })
       })
     })
   ]
 });
 
+const element = document.getElementById('popup');
+
+const popup = new Overlay({
+  element: element,
+  positioning: 'bottom-center',
+  stopEvent: false,
+  offset: [0, -10]
+});
+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.innerText = `lon: ${center[0].toFixed(2)}, lat: ${center[1].toFixed(2)}`;
+  info.innerHTML = formatCoordinate(center);
+});
+
+map.on('click', function(event) {
+  const feature = map.getFeaturesAtPixel(event.pixel)[0];
+  if (feature) {
+    const coordinate = feature.getGeometry().getCoordinates();
+    popup.setPosition(coordinate);
+    $(element).popover({
+      placement: 'top',
+      html: true,
+      content: formatCoordinate(coordinate)
+    });
+    $(element).popover('show');
+  } else {
+    $(element).popover('destroy');
+  }
+});
+
+map.on('pointermove', function(event) {
+  if (map.hasFeatureAtPixel(event.pixel)) {
+    map.getViewport().style.cursor = 'pointer';
+  } else {
+    map.getViewport().style.cursor = 'inherit';
+  }
 });