Additional changes to work with user projection

examples/geographic.css

@@ -0,0 +1,4 @@
+td {
+  padding: 0 0.5em;
+  text-align: right;
+}

examples/geographic.html

@@ -7,7 +7,11 @@ docs: >
   makes it so the map view uses geographic coordinates (even if the view projection is
   not geographic).
 tags: "geographic"
+resources:
+  - https://code.jquery.com/jquery-2.2.3.min.js
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
+  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
 ---
-<div id="map" class="map"></div>
+<div id="map" class="map"><div id="popup"></div></div>
 <div id="info"></div>
 

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';
+  }
 });