Add basic popup for item information

index.html

@@ -15,6 +15,10 @@
       </div>
     </aside>
     <div id="map"></div>
+    <div id="popup" class="ol-popup">
+      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+      <div id="popup-content"></div>
+    </div>
     <script type="module" src="./main.js"></script>
   </body>
 </html>

main.js

@@ -2,15 +2,36 @@ import './style.css';
 import {Map, View} from 'ol';
 import {fromLonLat, get} from 'ol/proj.js';
 import {defaults as defaultControls} from 'ol/control.js';
+import Overlay from 'ol/Overlay.js';
 
 import ToggleMenuControl from './ui/controls.js';
 
 import layerCategories from './layers/index.js';
 
+// from https://openlayers.org/en/latest/examples/popup.html
+const container = document.getElementById('popup');
+const content = document.getElementById('popup-content');
+const closer = document.getElementById('popup-closer');
+const popupOverlay = new Overlay({
+  element: container,
+  autoPan: {
+    animation: {
+      duration: 250,
+    },
+  },
+});
+
+closer.onclick = function () {
+  popupOverlay.setPosition(undefined);
+  closer.blur();
+  return false;
+};
+
 const map = new Map({
   controls: defaultControls().extend([new ToggleMenuControl()]),
   target: 'map',
   layers: [],
+  overlays: [popupOverlay],
   view: new View({
     center: fromLonLat([-93.24151, 44.80376]),
     zoom: 10,
@@ -56,3 +77,35 @@ for (let category of layerCategories) {
     }
   }
 }
+
+function objectToTable(o) {
+  // TODO: hack hack hack
+  let table = `<table style="margin: 0.5em; border-collapse: collapse;">`;
+  for (let [key, value] of Object.entries(o)) {
+    if (typeof value === "object") {
+      value = objectToTable(value);
+    }
+    if (typeof value === "string" && value.startsWith('https://')) {
+      value = `<a href="${value}">${value}</a>`
+    }
+    table += `<tr><td style="border: 1px solid;">${key}</td><td style="border: 1px solid;">${value}</td></tr>`;
+  }
+  table += `</table>`;
+  return table;
+}
+
+// from https://openlayers.org/en/latest/examples/icon.html
+map.on('click', function (evt) {
+  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+    return feature;
+  });
+  if (!feature) {
+    return;
+  }
+
+  // exclude geometry -- https://stackoverflow.com/a/208106
+  const {geometry: _, ...featureData} = feature.values_;
+
+  content.innerHTML = objectToTable(featureData);
+  popupOverlay.setPosition(evt.coordinate);
+});

style.css

@@ -82,3 +82,47 @@ aside summary {
     right: 0.5em;
   }
 }
+
+/* POPUP (from https://openlayers.org/en/latest/examples/popup.html) */
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #cccccc;
+  bottom: 12px;
+  left: -50px;
+  min-width: 280px;
+}
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.ol-popup-closer:after {
+  content: "✖";
+}
+/* END POPUP */