feat: Add map popover and hover effects to meetups map

Co-authored-by: hasparus <hasparus@gmail.com>

Author: cursoragent

src/app/(main)/community/events/map/meetup-map-popover.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { meetups } from "@/components/meetups"
+
+export type MeetupMapPointer = {
+  x: number
+  y: number
+  visible: boolean
+}
+
+const meetupNameById = new Map(meetups.map(({ node }) => [node.id, node.name]))
+
+type MeetupMapPopoverProps = {
+  activeMeetupId: string | null
+  pointer: MeetupMapPointer
+}
+
+export function MeetupMapPopover({ activeMeetupId, pointer }: MeetupMapPopoverProps) {
+  if (!activeMeetupId || !pointer.visible) return null
+  const name = meetupNameById.get(activeMeetupId)
+  if (!name) return null
+  return (
+    <div
+      data-testid="meetup-map-popover"
+      className="pointer-events-none absolute z-10 hidden min-w-0 -translate-x-1/2 -translate-y-3 whitespace-nowrap rounded border border-neu-100 bg-neu-0 px-2 py-1 text-xs font-medium text-neu-900 shadow-sm group-hover/map:flex"
+      style={{
+        left: pointer.x,
+        top: pointer.y,
+      }}
+    >
+      {name}
+    </div>
+  )
+}

src/app/(main)/community/events/meetups-map.tsx

@@ -1,11 +1,18 @@
 "use client"
 
-import { useEffect, useMemo, useRef, useState } from "react"
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+} from "react"
 import { useTheme } from "next-themes"
 
 import { meetups } from "@/components/meetups"
 
 import { bootMeetupsMap, type MapHandle, type MarkerPoint } from "./map/engine"
+import { MeetupMapPopover, type MeetupMapPointer } from "./map/meetup-map-popover"
 import { MapSkeleton } from "./map-skeleton"
 import { MeetupsList } from "./meetups-list"
 import { asRgbString, MAP_COLORS, MapColors } from "./map/map-colors"
@@ -38,6 +45,33 @@ export function MeetupsMap() {
 
   const [status, setStatus] = useState<MapStatus>("loading")
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [pointer, setPointer] = useState<MeetupMapPointer>({
+    x: 0,
+    y: 0,
+    visible: false,
+  })
+
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+    setPointer(previous => {
+      if (
+        previous.visible &&
+        Math.abs(previous.x - x) < 0.5 &&
+        Math.abs(previous.y - y) < 0.5
+      ) {
+        return previous
+      }
+      return { x, y, visible: true }
+    })
+  }
+
+  const handlePointerLeave = () => {
+    setPointer(previous =>
+      previous.visible ? { x: previous.x, y: previous.y, visible: false } : previous,
+    )
+  }
 
   useEffect(() => {
     initialThemeRef.current = themeColors
@@ -115,7 +149,11 @@ export function MeetupsMap() {
         } as React.CSSProperties
       }
     >
-      <div className="group/map relative grow border-neu-200 bg-[--sea] dark:border-neu-50 dark:bg-[--sea] md:border-l">
+      <div
+        className="group/map relative grow border-neu-200 bg-[--sea] dark:border-neu-50 dark:bg-[--sea] md:border-l"
+        onPointerMove={handlePointerMove}
+        onPointerLeave={handlePointerLeave}
+      >
         <canvas
           ref={canvasRef}
           aria-label="Interactive WebGL map of GraphQL meetups"
@@ -127,6 +165,8 @@ export function MeetupsMap() {
           }}
         />
 
+        <MeetupMapPopover activeMeetupId={activeMeetupId} pointer={pointer} />
+
         <InfoTip />
 
         <MapSkeleton className={status === "loading" ? "" : "!opacity-0"} />

test/e2e/community-events.spec.ts

@@ -42,3 +42,81 @@ test("community events page map loads and Zurich meetup link works", async ({
   await newPage.waitForLoadState("domcontentloaded", { timeout: 10000 })
   expect(newPage.url()).toContain("meetup.com/graphql-zurich")
 })
+
+test("community events map popover appears on marker hover", async ({ page }) => {
+  await page.goto("/community/events")
+  const mapCanvas = page.locator("canvas").first()
+  await expect(mapCanvas).toBeVisible({ timeout: 10000 })
+  await expect
+    .poll(async () => {
+      const box = await mapCanvas.boundingBox()
+      return Boolean(box && box.width > 100 && box.height > 100)
+    })
+    .toBe(true)
+  const popover = page.locator('[data-testid="meetup-map-popover"]')
+  await expect(popover).toHaveCount(0)
+  await mapCanvas.hover()
+  const { clientX, clientY } = await page.evaluate(() => {
+    const canvas = document.querySelector("canvas") as HTMLCanvasElement | null
+    if (!canvas) throw new Error("Canvas not found")
+    const targetLat = 51.51
+    const targetLon = -0.12
+    const aspectRatio = 1.65
+    const cellSize = 8
+    const mercatorLimit = 85.05112878
+    const minDisplayedLatitude = -60
+    const baseLatitudeOffset = 4
+    const baseLongitudeOffset = 0.1
+    const clamp01 = (value: number) => {
+      if (value <= 0) return 0
+      if (value >= 1) return 1
+      return value
+    }
+    const normalizeLongitude = (value: number) => {
+      let lon = value
+      while (lon <= -180) lon += 360
+      while (lon > 180) lon -= 360
+      return lon
+    }
+    const latToRawV = (lat: number) => {
+      const clampedLat = Math.max(-mercatorLimit, Math.min(mercatorLimit, lat))
+      const rad = (clampedLat * Math.PI) / 180
+      return 0.5 - Math.log(Math.tan(Math.PI * 0.25 + rad * 0.5)) / (2 * Math.PI)
+    }
+    const maxProjectedV = latToRawV(mercatorLimit)
+    const minProjectedV = latToRawV(minDisplayedLatitude)
+    const lonLatToUV = (lon: number, lat: number) => {
+      const adjustedLon = normalizeLongitude(lon + baseLongitudeOffset)
+      const u = (adjustedLon + 180) / 360
+      const adjustedLat = Math.max(
+        minDisplayedLatitude,
+        Math.min(mercatorLimit, lat + baseLatitudeOffset),
+      )
+      const rawV = latToRawV(adjustedLat)
+      const normalizedV = clamp01((rawV - maxProjectedV) / (minProjectedV - maxProjectedV))
+      return [u, normalizedV] as const
+    }
+    const { width, height } = canvas
+    const pixelRatio = window.devicePixelRatio || 1
+    const worldHeight = Math.min(width / aspectRatio, height)
+    const worldWidth = worldHeight * aspectRatio
+    const panX = width * 0.5 - worldWidth * 0.5
+    const panY = height * 0.5 - worldHeight * 0.5
+    const [u, v] = lonLatToUV(targetLon, targetLat)
+    const markerY = 1 - v
+    const screenX = panX + u * worldWidth
+    const screenY = panY + markerY * worldHeight
+    const deviceCell = cellSize * pixelRatio
+    const cellX = Math.floor(screenX / deviceCell)
+    const cellY = Math.floor(screenY / deviceCell)
+    const centerX = (cellX + 0.5) * deviceCell
+    const centerY = (cellY + 0.5) * deviceCell
+    const rect = canvas.getBoundingClientRect()
+    const clientX = rect.left + centerX / pixelRatio
+    const clientY = rect.bottom - centerY / pixelRatio
+    return { clientX, clientY }
+  })
+  await page.mouse.move(clientX, clientY)
+  await expect(popover).toHaveText("London GraphQL", { timeout: 5000 })
+  await expect(popover).toBeVisible()
+})