A map-first real estate search with MapLibre and shadcn/ui: workers, clusters and six traps

/** A marker whose content is React (portalled into MapLibre's positioned element). */
export function MapMarker({ lngLat, children, zIndex = 1, anchor = "center" }: MapMarkerProps) {
  const map = useMap()
  const [marker] = useState(() => new maplibregl.Marker({ element: document.createElement("div"), anchor }))
  const [lng, lat] = lngLat

  useEffect(() => {
    marker.setLngLat([lng, lat]).addTo(map)
    // The content is the focusable, named control; MapLibre's generic "Map marker" button wrapper is not.
    const el = marker.getElement()
    el.removeAttribute("aria-label")
    el.removeAttribute("role")
    el.removeAttribute("tabindex")
    return () => {
      marker.remove()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [map, marker])

  useEffect(() => {
    marker.setLngLat([lng, lat])
  }, [marker, lng, lat])

  useEffect(() => {
    marker.getElement().style.zIndex = String(zIndex)
  }, [marker, zIndex])

  return createPortal(children, marker.getElement())
}

/** Reads a CSS colour variable as rgb(), which MapLibre can parse whatever colour space the theme uses. */
export function cssColor(name: string, el: Element = document.documentElement) {
  const value = getComputedStyle(el).getPropertyValue(name).trim()
  const canvas = document.createElement("canvas")
  canvas.width = canvas.height = 1
  const ctx = canvas.getContext("2d", { willReadFrequently: true })
  if (!ctx || !value) return value || "#888"
  ctx.fillStyle = value
  ctx.fillRect(0, 0, 1, 1)
  const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data
  return `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`
}

/**
 * MapLibre 6 does its tile work in a separate worker file that app bundlers don't ship. Unless you've set one (for
 * example `maplibregl.setWorkerUrl("/maplibre-gl-worker.mjs")` after copying it from node_modules/maplibre-gl/dist
 * to public/), the same version's file is fetched from a CDN once and handed over as a classic script (a data: URL
 * MapLibre turns into a blob worker), which also starts inside sandboxed frames, where module workers from blobs
 * don't. Under a Content-Security-Policy that needs `worker-src blob:` and `data:` in `connect-src`.
 */
export function prepareWorker() {
  worker ??= (async () => {
    const version = maplibregl.getVersion()
    if (maplibregl.getWorkerUrl() || Number(version.split(".")[0]) < 6) return
    for (const cdn of CDNS) {
      try {
        const res = await fetch(`${cdn}/maplibre-gl@${version}/dist/maplibre-gl-worker.mjs`)
        if (!res.ok) continue
        // The file's only module syntax is its last line, `export { … }`; without it, it runs as a classic script.
        const code = (await res.text()).replace(/export\s*\{[^}]*\};?\s*(\/\/# sourceMappingURL=\S*\s*)?$/, "")
        // MapLibre starts a worker as a classic script when its address ends in ".cjs".
        maplibregl.setWorkerUrl(
          `data:text/javascript;charset=utf-8,${encodeURIComponent(`${code}
//`)}.cjs`,
        )
        return
      } catch {
        // The next CDN.
      }
    }
    // Let MapLibre try the address itself (it imports cross-origin workers through a blob).
    maplibregl.setWorkerUrl(`${CDNS[0]}/maplibre-gl@${version}/dist/maplibre-gl-worker.mjs`)
  })()
  return worker
}

  /* ── clustering ── */
  const index = useMemo(() => {
    const sc = new Supercluster<PointProps, ClusterProps>({
      radius: 68,
      maxZoom: CLUSTER_MAX_ZOOM,
      map: (p) => {
        const price = store.getState().byId.get(p.id)?.price ?? 0
        return {
          apartment: +(p.type === "apartment"),
          villa: +(p.type === "villa"),
          studio: +(p.type === "studio"),
          commercial: +(p.type === "commercial"),
          minPrice: price,
        }
      },
      reduce: (acc, p) => {
        acc.apartment += p.apartment
        acc.villa += p.villa
        acc.studio += p.studio
        acc.commercial += p.commercial
        acc.minPrice = Math.min(acc.minPrice, p.minPrice)
      },
    })
    sc.load(
      results.map((p) => ({
        type: "Feature",
        geometry: { type: "Point", coordinates: p.coordinates },
        properties: { id: p.id, type: p.type },
      })),
    )
    return sc
  }, [results, store])

  // Right after a style switch, labels still being laid out for the old style can ask the new style's glyph server for
  // the old style's fonts (404s in the console). Those requests go back to the server that has the fonts.
  useEffect(() => {
    let servers: { url: string; fonts: Set<string> }[] = []
    const remember = () => {
      const style = map.getStyle()
      if (!style?.glyphs) return
      const fonts = new Set<string>()
      for (const layer of style.layers ?? []) {
        const font = (layer as { layout?: { "text-font"?: unknown } }).layout?.["text-font"]
        if (Array.isArray(font) && font.every((f) => typeof f === "string")) fonts.add(font.join(","))
      }
      servers = [{ url: style.glyphs, fonts }, ...servers.filter((g) => g.url !== style.glyphs)].slice(0, 3)
    }
    map.on("style.load", remember)
    if (map.isStyleLoaded()) remember()
    map.setTransformRequest((url, type) => {
      if (type !== "Glyphs" || servers.length < 2) return { url }
      const m = /\/([^/]+)\/(\d+-\d+)\.pbf/.exec(url)
      const stack = m && decodeURIComponent(m[1])
      if (!m || !stack || servers[0].fonts.has(stack)) return { url }
      const owner = servers.find((g) => g.fonts.has(stack))
      return { url: owner ? owner.url.replace("{fontstack}", m[1]).replace("{range}", m[2]) : url }
    })
    return () => {
      map.off("style.load", remember)
    }
  }, [map])

/** The sheet is the window's height less TOP_GAP, so its last snap point (1) leaves the map's top edge in view. */
const TOP_GAP = 44
export const SNAPS: (number | string)[] = [`${PEEK_H + TOP_GAP}px`, 0.55, 1]

    // An open dialog, popover or menu keeps its own keys; tooltips don't count.
    const overlay = document.querySelector(
      "[role='dialog'][data-state='open']:not([data-vaul-drawer]), [role='menu'], [cmdk-list]:not([hidden])",
    )

const schema = z.object({
  name: z.string().trim().min(2, "Enter your full name"),
  code: z.string(),
  phone: z
    .string()
    .trim()
    .regex(/^[\d\s().-]+$/, "Use digits only")
    .refine((v) => v.replace(/\D/g, "").length >= 6 && v.replace(/\D/g, "").length <= 14, "Enter a valid phone number"),
  email: z.string().trim().email({ message: "Enter a valid email address" }),
  date: z.date({ message: "Pick a date" }),
  slot: z.enum(["morning", "afternoon", "evening"], { message: "Pick a time slot" }),
  message: z.string().max(500, "Keep it under 500 characters").optional(),