API Reference

import { useMapEvent } from "@/features/maps/lib/hooks";

// Subscribe to map camera events
useMapEvent(map, isLoaded, "moveend", () => {
  console.log("Camera stopped moving");
});

// Subscribe to layer-specific events
useMapEvent(map, isLoaded, "click", (e) => {
  console.log("Clicked feature:", e.features?.[0]);
}, "my-layer-id");

import { useMapLayer } from "@/features/maps/lib/hooks";

const geojson = useMemo(() => ({
  type: "FeatureCollection" as const,
  features: points.map((p) => ({
    type: "Feature" as const,
    geometry: { type: "Point" as const, coordinates: [p.lng, p.lat] },
    properties: p,
  })),
}), [points]);

const { sourceId, layerId } = useMapLayer(map, isLoaded, {
  id: "my-points",
  type: "circle",
  data: geojson,
  paint: { "circle-radius": 6, "circle-color": "#3b82f6" },
});

import { useMapViewport } from "@/features/maps/lib/hooks";

const { center, zoom, bearing, pitch } = useMapViewport(map, isLoaded);
// center: [lng, lat], zoom: number, bearing: degrees, pitch: degrees

import { useMapBounds } from "@/features/maps/lib/hooks";

const bounds = useMapBounds(map, isLoaded);
// bounds: [[sw_lng, sw_lat], [ne_lng, ne_lat]] | null

import { useCallbackRef } from "@/features/maps/lib/hooks";

// Prevents stale closures in MapLibre event handlers
const onClickRef = useCallbackRef(onClick);

useEffect(() => {
  if (!map || !isLoaded) return;
  const handler = (e: MapMouseEvent) => onClickRef.current?.(e);
  map.on("click", "my-layer", handler);
  return () => { map.off("click", "my-layer", handler); };
}, [map, isLoaded]);

import { useReducedMotion } from "@/features/maps/lib/hooks";

const reduceMotion = useReducedMotion();
// true if prefers-reduced-motion: reduce is active

import { useDebouncedValue } from "@/features/maps/lib/hooks";

const [search, setSearch] = useState("");
const debouncedSearch = useDebouncedValue(search, 300);
// debouncedSearch updates 300ms after last search change

import { useDebouncedCallback } from "@/features/maps/lib/hooks";

const debouncedFetch = useDebouncedCallback((query: string) => {
  fetch(`/api/search?q=${query}`);
}, 300);