@elabs-ai/components-maps 4.2.0 → 5.1.0

package/src/map-annotation/anchor.ts

@@ -0,0 +1,92 @@
+/**
+ * The eight label anchors a map label or annotation can sit at, relative to
+ * its point. Compass-style and PHYSICAL on purpose: east of Toronto is east in
+ * every writing direction, so a map label never mirrors in RTL.
+ */
+export type MapLabelAnchor =
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+/** Every anchor, clockwise from `top` (for stories and validation). */
+export const MAP_LABEL_ANCHORS: readonly MapLabelAnchor[] = [
+  "top",
+  "top-right",
+  "right",
+  "bottom-right",
+  "bottom",
+  "bottom-left",
+  "left",
+  "top-left",
+];
+
+/**
+ * Where a label box sits for `anchor`, `distance` px away from its point:
+ * `dx` / `dy` is the attach point (the box's nearest edge or corner) relative
+ * to the point, and `fx` / `fy` the box's own offset as a fraction of its
+ * width / height (`0`, `-0.5` or `-1`), so the box grows away from the point.
+ */
+export interface MapAnchorGeometry {
+  dx: number;
+  dy: number;
+  fx: number;
+  fy: number;
+}
+
+const DIAGONAL = Math.SQRT1_2;
+
+export function mapAnchorGeometry(anchor: MapLabelAnchor, distance: number): MapAnchorGeometry {
+  const d = Math.max(0, distance);
+  const k = d * DIAGONAL;
+  switch (anchor) {
+    case "top":
+      return { dx: 0, dy: -d, fx: -0.5, fy: -1 };
+    case "bottom":
+      return { dx: 0, dy: d, fx: -0.5, fy: 0 };
+    case "left":
+      return { dx: -d, dy: 0, fx: -1, fy: -0.5 };
+    case "right":
+      return { dx: d, dy: 0, fx: 0, fy: -0.5 };
+    case "top-left":
+      return { dx: -k, dy: -k, fx: -1, fy: -1 };
+    case "top-right":
+      return { dx: k, dy: -k, fx: 0, fy: -1 };
+    case "bottom-left":
+      return { dx: -k, dy: k, fx: -1, fy: 0 };
+    case "bottom-right":
+      return { dx: k, dy: k, fx: 0, fy: 0 };
+  }
+}
+
+/** The CSS transform that puts a label box at `anchor`, `distance` px from its point. */
+export function mapAnchorTransform(anchor: MapLabelAnchor, distance: number): string {
+  const { dx, dy, fx, fy } = mapAnchorGeometry(anchor, distance);
+  return `translate(calc(${fx * 100}% + ${dx}px), calc(${fy * 100}% + ${dy}px))`;
+}
+
+/**
+ * The shift that keeps a `width` × `height` box whose top-left corner would
+ * land at (`left`, `top`) inside a `boundsWidth` × `boundsHeight` container,
+ * `pad` px from every edge. A box larger than the container pins to the
+ * start / top edge.
+ */
+export function clampShift(
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  boundsWidth: number,
+  boundsHeight: number,
+  pad = 4,
+): { sx: number; sy: number } {
+  const maxLeft = Math.max(pad, boundsWidth - width - pad);
+  const maxTop = Math.max(pad, boundsHeight - height - pad);
+  const clampedLeft = Math.min(maxLeft, Math.max(pad, left));
+  const clampedTop = Math.min(maxTop, Math.max(pad, top));
+  return { sx: clampedLeft - left, sy: clampedTop - top };
+}

package/src/map-annotation/index.ts

@@ -0,0 +1,15 @@
+export {
+  MapAnnotation,
+  MapAnnotationKey,
+  type MapAnnotationProps,
+  type MapAnnotationConnector,
+  type MapAnnotationKeyProps,
+  type MapAnnotationKeyRow,
+} from "./map-annotation";
+export {
+  MAP_LABEL_ANCHORS,
+  mapAnchorGeometry,
+  mapAnchorTransform,
+  type MapLabelAnchor,
+  type MapAnchorGeometry,
+} from "./anchor";

package/src/map-annotation/map-annotation.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+
+import { MapCanvas } from "../map-canvas";
+import { MapMarker, MapMarkerContent } from "../map-marker";
+import { LOCATOR_BOUNDS, LOCATOR_PLACES } from "../test-utils/locator-fixture";
+import { MAP_LABEL_ANCHORS } from "./anchor";
+import { MapAnnotation } from "./map-annotation";
+
+const meta = {
+  title: "Maps/MapAnnotation",
+  component: MapAnnotation,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof MapAnnotation>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const NOTES = [
+  { id: "toronto", at: LOCATOR_PLACES.toronto, text: "Toronto sits on the north shore." },
+  { id: "lake", at: LOCATOR_PLACES.lakeLabel, text: "The lake is 311 km long." },
+  { id: "kingston", at: LOCATOR_PLACES.kingston, text: "Kingston marks the outlet." },
+] as const;
+
+/**
+ * Three notes with leader lines. From `medium` up each is painted beside its
+ * point; at `narrow` (under 480 px of map width) the text would cover the
+ * data, so each point gets a number and the notes move to a numbered key
+ * under the map, in reading order.
+ */
+export const Default: Story = {
+  args: { longitude: 0, latitude: 0, text: "" },
+  render: () => (
+    <div className="w-full p-4">
+      <MapCanvas interactive={false} bounds={LOCATOR_BOUNDS} fitBoundsOptions={{ padding: 48 }}>
+        {NOTES.map((note, index) => (
+          <MapAnnotation
+            key={note.id}
+            {...note.at}
+            text={note.text}
+            anchor={index === 1 ? "bottom-right" : "top-right"}
+          />
+        ))}
+      </MapCanvas>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const map = canvasElement.querySelector<HTMLElement>('[data-slot="map-canvas"]');
+    if (!map || !canvasElement.querySelector(".maplibregl-canvas")) return;
+    await waitFor(() =>
+      expect(canvasElement.querySelectorAll('[data-slot="map-annotation"]')).toHaveLength(3),
+    );
+    if (map.getAttribute("data-map-breakpoint") === "narrow") {
+      const key = await waitFor(() => {
+        const el = canvasElement.querySelector('[data-slot="map-annotation-key"]');
+        expect(el).not.toBeNull();
+        return el!;
+      });
+      await expect(key.querySelectorAll('[data-slot="map-annotation-key-item"]')).toHaveLength(3);
+      await expect(map.contains(key)).toBe(false);
+    } else {
+      await expect(canvasElement.querySelector('[data-slot="map-annotation-key"]')).toBeNull();
+      await expect(
+        canvasElement.querySelectorAll('[data-slot="map-annotation-connector"]'),
+      ).toHaveLength(3);
+    }
+  },
+};
+
+/**
+ * Every anchor around one point, with arrowheads; a note whose `showAt` says
+ * `narrow: false` stays off small maps entirely instead of joining the key.
+ */
+export const AnchorsAndArrows: Story = {
+  args: { longitude: 0, latitude: 0, text: "" },
+  render: () => (
+    <div className="w-full p-4">
+      <MapCanvas interactive={false} center={[-78.2, 43.7]} zoom={6.4}>
+        <MapMarker longitude={-78.2} latitude={43.7}>
+          <MapMarkerContent />
+        </MapMarker>
+        {MAP_LABEL_ANCHORS.map((anchor) => (
+          <MapAnnotation
+            key={anchor}
+            longitude={-78.2}
+            latitude={43.7}
+            text={anchor}
+            anchor={anchor}
+            connector={{ arrow: true }}
+            showAt={{ base: true, narrow: anchor.includes("-") ? false : true }}
+          />
+        ))}
+      </MapCanvas>
+    </div>
+  ),
+};
+
+/** A note with no leader line — the text sits right at its point. */
+export const WithoutConnector: Story = {
+  args: { longitude: 0, latitude: 0, text: "" },
+  render: () => (
+    <div className="w-full p-4">
+      <MapCanvas interactive={false} center={[-79.38, 43.65]} zoom={8}>
+        <MapAnnotation
+          {...LOCATOR_PLACES.toronto}
+          text="Downtown Toronto"
+          anchor="right"
+          connector={false}
+        />
+      </MapCanvas>
+    </div>
+  ),
+};

package/src/map-annotation/map-annotation.test.tsx

@@ -0,0 +1,106 @@
+import { cleanup, render, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from "vitest";
+
+vi.mock("maplibre-gl", async () => {
+  const { createMaplibreMock } = await import("../test-utils/maplibre-mock");
+  return createMaplibreMock();
+});
+
+import { resetMaplibreMock } from "../test-utils/maplibre-mock";
+import { MapCanvas } from "../map-canvas";
+import { MapAnnotation } from "./map-annotation";
+import { clampShift, mapAnchorGeometry } from "./anchor";
+
+let rectSpy: MockInstance | null = null;
+function atWidth(width: number) {
+  rectSpy = vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+    width,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  });
+}
+
+beforeEach(() => {
+  rectSpy = null;
+});
+
+afterEach(() => {
+  rectSpy?.mockRestore();
+  cleanup();
+  resetMaplibreMock();
+});
+
+function ThreeNotes() {
+  return (
+    <MapCanvas>
+      <MapAnnotation longitude={-79.4} latitude={43.7} text="Toronto sits on the north shore." />
+      <MapAnnotation
+        longitude={-78.9}
+        latitude={43.3}
+        text="Only on wide maps."
+        showAt={{ base: true, narrow: false }}
+      />
+      <MapAnnotation longitude={-77.5} latitude={43.6} text="The lake is 311 km long." />
+      <MapAnnotation longitude={-76.4} latitude={44.2} text="Kingston marks the outlet." />
+    </MapCanvas>
+  );
+}
+
+describe("MapAnnotation", () => {
+  it("paints its text with a leader line at wide, and no key", async () => {
+    atWidth(868);
+    render(<ThreeNotes />);
+    expect(await screen.findByText("Toronto sits on the north shore.")).toBeInTheDocument();
+    expect(document.querySelectorAll('[data-slot="map-annotation-connector"]')).toHaveLength(4);
+    expect(document.querySelector('[data-slot="map-annotation-key"]')).toBeNull();
+  });
+
+  it("numbers the shown notes in reading order and keys them under the map at narrow", async () => {
+    atWidth(348);
+    render(<ThreeNotes />);
+    const key = await waitFor(() => {
+      const el = document.querySelector<HTMLElement>('[data-slot="map-annotation-key"]');
+      expect(el).not.toBeNull();
+      return el!;
+    });
+    const rows = within(key).getAllByRole("listitem");
+    expect(rows).toHaveLength(3);
+    expect(rows.map((row) => row.textContent)).toEqual([
+      "1Toronto sits on the north shore.",
+      "2The lake is 311 km long.",
+      "3Kingston marks the outlet.",
+    ]);
+    // The key sits OUTSIDE the map box, after it.
+    const below = document.querySelector('[data-slot="map-canvas-below"]')!;
+    expect(below.contains(key)).toBe(true);
+    const map = document.querySelector('[data-slot="map-canvas"]')!;
+    expect(map.contains(key)).toBe(false);
+    // On the map: three numbered markers, the hidden note gone.
+    const markers = map.querySelectorAll('[data-slot="map-annotation-number"]');
+    expect([...markers].map((m) => m.textContent)).toEqual(["1", "2", "3"]);
+    expect(map.querySelectorAll('[data-display="hidden"]')).toHaveLength(1);
+  });
+});
+
+describe("annotation geometry", () => {
+  it("sets the box on the far side of its anchor", () => {
+    expect(mapAnchorGeometry("top", 10)).toEqual({ dx: 0, dy: -10, fx: -0.5, fy: -1 });
+    expect(mapAnchorGeometry("right", 10)).toEqual({ dx: 10, dy: 0, fx: 0, fy: -0.5 });
+    const diagonal = mapAnchorGeometry("bottom-left", 10);
+    expect(diagonal.dx).toBeCloseTo(-7.071, 3);
+    expect(diagonal.dy).toBeCloseTo(7.071, 3);
+  });
+
+  it("clamps a box inside the map on both axes", () => {
+    expect(clampShift(330, -20, 60, 30, 348, 348)).toEqual({ sx: -46, sy: 24 });
+    expect(clampShift(10, 10, 60, 30, 348, 348)).toEqual({ sx: 0, sy: 0 });
+    // Wider than the map: pinned to the start edge.
+    expect(clampShift(-50, 10, 500, 30, 348, 348)).toEqual({ sx: 54, sy: 0 });
+  });
+});

package/src/map-annotation/map-annotation.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+
+import { useMap } from "../map-canvas/map-context";
+import {
+  type MapBreakpoint,
+  type MapResponsive,
+  useMapBreakpoint,
+  resolveMapResponsive,
+} from "../lib/use-map-breakpoint";
+import { type MapLabelAnchor, clampShift, mapAnchorGeometry } from "./anchor";
+
+// ── Registry ─────────────────────────────────────────────────────────────────
+//
+// Every `<MapAnnotation>` in a canvas registers here, so the canvas can number
+// them and render ONE key under the map at `narrow`. Numbers follow reading
+// order — the annotations' DOM order, which is their JSX order — and skip an
+// annotation hidden at the current tier (the RM-111 rule `charts` uses).
+
+interface AnnotationEntry {
+  id: string;
+  el: HTMLElement;
+  text: ReactNode;
+  hidden: boolean;
+}
+
+/** One row of the narrow key. */
+export interface MapAnnotationKeyRow {
+  id: string;
+  number: number;
+  text: ReactNode;
+}
+
+interface MapAnnotationRegistryValue {
+  register: (entry: AnnotationEntry) => () => void;
+  /** The number an annotation shows at this tier, or `undefined` when it paints its text. */
+  numberOf: (id: string) => number | undefined;
+}
+
+const NO_ROWS: MapAnnotationKeyRow[] = [];
+
+const MapAnnotationRegistryContext = createContext<MapAnnotationRegistryValue | null>(null);
+
+function byDocumentOrder(a: AnnotationEntry, b: AnnotationEntry): number {
+  if (a.el === b.el) return 0;
+  return a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+
+/**
+ * Internal: the annotation registry a `<MapCanvas>` owns. Returns the context
+ * value to provide and the key rows to render under the map (empty unless the
+ * tier is `narrow`).
+ */
+export function useMapAnnotationRegistry(breakpoint: MapBreakpoint): {
+  value: MapAnnotationRegistryValue;
+  rows: MapAnnotationKeyRow[];
+} {
+  const [entries, setEntries] = useState<ReadonlyMap<string, AnnotationEntry>>(() => new Map());
+
+  const register = useCallback((entry: AnnotationEntry) => {
+    setEntries((prev) => {
+      const current = prev.get(entry.id);
+      if (
+        current &&
+        current.el === entry.el &&
+        current.text === entry.text &&
+        current.hidden === entry.hidden
+      ) {
+        return prev;
+      }
+      const next = new Map(prev);
+      next.set(entry.id, entry);
+      return next;
+    });
+    return () => {
+      setEntries((prev) => {
+        if (!prev.has(entry.id)) return prev;
+        const next = new Map(prev);
+        next.delete(entry.id);
+        return next;
+      });
+    };
+  }, []);
+
+  const rows = useMemo<MapAnnotationKeyRow[]>(() => {
+    if (breakpoint !== "narrow") return NO_ROWS;
+    return [...entries.values()]
+      .filter((entry) => !entry.hidden && entry.el.isConnected)
+      .sort(byDocumentOrder)
+      .map((entry, index) => ({ id: entry.id, number: index + 1, text: entry.text }));
+  }, [entries, breakpoint]);
+
+  const value = useMemo<MapAnnotationRegistryValue>(() => {
+    const numbers = new Map(rows.map((row) => [row.id, row.number]));
+    return { register, numberOf: (id) => numbers.get(id) };
+  }, [register, rows]);
+
+  return { value, rows };
+}
+
+/** Internal: provides the registry `useMapAnnotationRegistry` built. */
+export const MapAnnotationRegistryProvider = MapAnnotationRegistryContext.Provider;
+
+// ── Key ──────────────────────────────────────────────────────────────────────
+
+export interface MapAnnotationKeyProps extends HTMLAttributes<HTMLOListElement> {
+  /** The rows, in reading order. */
+  rows: readonly MapAnnotationKeyRow[];
+}
+
+/**
+ * The numbered list `<MapCanvas>` renders under the map at `narrow`, where each
+ * `<MapAnnotation>` shows only its number on the map: "1 Lake Ontario, …".
+ * NOT `aria-hidden` — at `narrow` this list is the only place the text lives.
+ */
+export const MapAnnotationKey = forwardRef<HTMLOListElement, MapAnnotationKeyProps>(
+  function MapAnnotationKey({ rows, className, ...props }, ref) {
+    return (
+      <ol
+        ref={ref}
+        data-slot="map-annotation-key"
+        data-count={rows.length}
+        className={cn("m-0 flex list-none flex-col gap-1 p-0", className)}
+        {...props}
+      >
+        {rows.map((row) => (
+          <li
+            key={row.id}
+            data-slot="map-annotation-key-item"
+            className="flex items-start gap-1.5 text-caption text-foreground"
+          >
+            <NumberBadge number={row.number} />
+            <span className="min-w-0 break-words">{row.text}</span>
+          </li>
+        ))}
+      </ol>
+    );
+  },
+);
+
+function NumberBadge({ number, className }: { number: number; className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="map-annotation-number"
+      className={cn(
+        "inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-foreground text-meta font-semibold text-background tabular-nums",
+        className,
+      )}
+    >
+      {number}
+    </span>
+  );
+}
+
+// ── Annotation ───────────────────────────────────────────────────────────────
+
+/** A leader line from the point to the text; `arrow` puts an arrowhead at the point. */
+export interface MapAnnotationConnector {
+  arrow?: boolean;
+}
+
+export interface MapAnnotationProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Longitude of the point the note is about. */
+  longitude: number;
+  /** Latitude of the point the note is about. */
+  latitude: number;
+  /** The note. Plain text reads best; it moves into the key at `narrow`. */
+  text: ReactNode;
+  /** Where the text sits relative to the point (default `"top-right"`). */
+  anchor?: MapLabelAnchor;
+  /**
+   * The leader line from the point to the text (default: a plain line). Pass
+   * `false` to set the text right beside the point with no line.
+   */
+  connector?: MapAnnotationConnector | false;
+  /**
+   * Whether the note shows at a tier (default `true` everywhere). A hidden note
+   * takes no number, so the key stays gap-free.
+   */
+  showAt?: MapResponsive<boolean>;
+  /** Paint order among annotations: a higher one paints on top (0–8, default 0). */
+  priority?: number;
+}
+
+const LEADER_DISTANCE = 28;
+const PLAIN_DISTANCE = 6;
+
+/**
+ * A text note pinned to a lon / lat with a leader line — an HTML overlay that
+ * follows the map. At `narrow` the text gives way to a numbered marker and
+ * `<MapCanvas>` lists the notes, in reading order, in a key under the map.
+ * The text box clamps inside the map on both axes. Render inside `<MapCanvas>`.
+ */
+export const MapAnnotation = forwardRef<HTMLDivElement, MapAnnotationProps>(function MapAnnotation(
+  {
+    longitude,
+    latitude,
+    text,
+    anchor = "top-right",
+    connector = {},
+    showAt = true,
+    priority = 0,
+    className,
+    style,
+    ...props
+  },
+  forwardedRef,
+) {
+  const { map } = useMap();
+  const registry = useContext(MapAnnotationRegistryContext);
+  const breakpoint = useMapBreakpoint();
+  const id = useId();
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  const boxRef = useRef<HTMLDivElement>(null);
+  const lineRef = useRef<SVGLineElement>(null);
+
+  const hidden = !resolveMapResponsive(showAt, breakpoint);
+  const number = registry?.numberOf(id);
+  const keyed = number !== undefined;
+
+  const setRefs = useCallback(
+    (node: HTMLDivElement | null) => {
+      setRoot(node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef],
+  );
+
+  // Depend on the stable `register`, never the registry value: that changes
+  // with every registration and would re-register in a loop.
+  const register = registry?.register;
+  useLayoutEffect(() => {
+    if (!register || !root) return undefined;
+    return register({ id, el: root, text, hidden });
+  }, [register, id, root, text, hidden]);
+
+  const distance = connector === false ? PLAIN_DISTANCE : LEADER_DISTANCE;
+
+  // Follow the map. Transforms are written straight to the DOM on every move
+  // (no React render per frame); the text box is measured and clamped inside
+  // the map, and the leader line's end moves with it.
+  useLayoutEffect(() => {
+    if (!map || !root || hidden) return undefined;
+    const container = map.getContainer();
+    const { dx, dy, fx, fy } = mapAnchorGeometry(anchor, distance);
+    const update = () => {
+      const point = map.project([longitude, latitude]);
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      const inside = point.x >= 0 && point.y >= 0 && point.x <= width && point.y <= height;
+      root.style.visibility = inside ? "" : "hidden";
+      root.style.transform = `translate(${point.x}px, ${point.y}px)`;
+      const box = boxRef.current;
+      if (!box) return;
+      const boxWidth = box.offsetWidth;
+      const boxHeight = box.offsetHeight;
+      const left = point.x + dx + fx * boxWidth;
+      const top = point.y + dy + fy * boxHeight;
+      const { sx, sy } = clampShift(left, top, boxWidth, boxHeight, width, height);
+      box.style.transform = `translate(${dx + sx + fx * boxWidth}px, ${dy + sy + fy * boxHeight}px)`;
+      const line = lineRef.current;
+      if (line) {
+        line.setAttribute("x2", String(dx + sx));
+        line.setAttribute("y2", String(dy + sy));
+      }
+    };
+    update();
+    map.on("move", update);
+    map.on("resize", update);
+    return () => {
+      map.off("move", update);
+      map.off("resize", update);
+    };
+  }, [map, root, hidden, keyed, anchor, distance, longitude, latitude, text]);
+
+  const arrowId = `${id}-arrow`;
+
+  return (
+    <div
+      ref={setRefs}
+      data-slot="map-annotation"
+      data-display={hidden ? "hidden" : keyed ? "keyed" : "painted"}
+      hidden={hidden}
+      className={cn("pointer-events-none absolute", className)}
+      // Geographic overlay: a projected pixel offset from the map's top-left
+      // corner, physical in every writing direction (like MapLibre's markers).
+      style={{ left: 0, top: 0, zIndex: 1 + Math.max(0, Math.min(8, priority)), ...style }}
+      {...props}
+    >
+      {keyed ? (
+        <NumberBadge number={number} className="absolute -translate-x-1/2 -translate-y-1/2" />
+      ) : (
+        <>
+          {connector !== false && (
+            <svg
+              aria-hidden="true"
+              data-slot="map-annotation-connector"
+              className="absolute overflow-visible text-foreground"
+              width={1}
+              height={1}
+            >
+              {connector.arrow && (
+                <defs>
+                  <marker
+                    id={arrowId}
+                    viewBox="0 0 8 8"
+                    refX={0}
+                    refY={4}
+                    markerWidth={8}
+                    markerHeight={8}
+                    orient="auto"
+                  >
+                    <path d="M8 0 L0 4 L8 8 Z" fill="currentColor" />
+                  </marker>
+                </defs>
+              )}
+              <line
+                ref={lineRef}
+                x1={0}
+                y1={0}
+                x2={0}
+                y2={0}
+                stroke="currentColor"
+                strokeWidth={1}
+                markerStart={connector.arrow ? `url(#${arrowId})` : undefined}
+              />
+            </svg>
+          )}
+          <div
+            ref={boxRef}
+            data-slot="map-annotation-text"
+            className="absolute w-max max-w-48 rounded-sm bg-background/85 px-1 text-caption text-foreground"
+          >
+            {text}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});