Display map coordinates on click

src/css/sections/meetups.css

@@ -11,7 +11,8 @@
       margin-top: var(--space-xl);
 
       & img,
-      & .dot {
+      & .dot,
+      & .tooltip {
         display: none;
       }
     }
@@ -75,6 +76,16 @@
           animation-name: pulse;
         }
       }
+
+      & .tooltip {
+        position: absolute;
+        z-index: 2;
+        min-width: 7rem;
+        font-size: .65rem;
+        padding: var(--space-xs) var(--space-m);
+        background: var(--color-overlay-bg);
+        border-radius: var(--space-m);
+      }
     }
   }
 

src/kurse.pug

@@ -33,6 +33,7 @@ block main
               - j++
 
         img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
+        #tooltip.tooltip(hidden)
 
       if unmapped.length
         #unmapped

src/meetups.pug

@@ -53,6 +53,7 @@ block main
               - j++
 
         img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH")
+        #tooltip.tooltip(hidden)
 
       #unmapped
         h2 Weitere Meetups

static/js/main.js

@@ -109,13 +109,18 @@ document.addEventListener("DOMContentLoaded", () => {
   })
 
   // Map
-  const map = document.getElementById('dach')
+  const map = document.getElementById('map')
-  if (map) {
+  const mapImg = document.getElementById('dach')
-    map.onclick = e => {
+  const tooltip = document.getElementById('tooltip')
-      console.log({
+  if (map && mapImg && tooltip) {
-        top: Math.round((e.offsetY / e.target.height) * 100) - 2,
+    mapImg.onclick = e => {
-        left: Math.round((e.offsetX / e.target.width) * 100) + 1,
+      const top = Math.round((e.offsetY / e.target.height) * 100) - 2
-      })
+      const left = Math.round((e.offsetX / e.target.width) * 100) + 1
+      console.log({ top, left }, map)
+      tooltip.innerText = `Top: ${top} / Left: ${left}`
+      tooltip.removeAttribute('hidden')
+      tooltip.style.top = `${top + 1}%`
+      tooltip.style.left = `${left}%`
     }
   }
 })