React — <CampusMap>

Import from the React subpath. The component renders a single container div; the SDK mounts the map surface inside it.

import { useRef } from "react";
import { CampusMap } from "@waylocate/embed/react";
import type { WaylocateMap } from "@waylocate/embed/react";

export function BookingMap() {
  const mapRef = useRef<WaylocateMap | null>(null);

  return (
    <>
      <button
        onClick={() =>
          mapRef.current?.camera.flyTo({ zoom: 18, duration: 800 })
        }
      >
        Zoom in
      </button>

      <CampusMap
        ref={mapRef}
        className="h-[600px] w-full"
        campus="ucba"
        building="muntz-hall"
        room="muntz-hall/170"
        onReady={(map) => console.log("ready", map.capabilities)}
        onSelectionChange={(selection, meta) => {
          if (meta.source === "user") openPanel(selection.room);
        }}
      />
    </>
  );
}

Props

Prop	Role
campus, ui, from, to, nav, mapOrigin	Initial load — changing campus remounts the map
building, floor, room	Live selection — synced as commands after connect
className, style, label	Your container styling and accessible name
onReady, onError, onSelectionChange	Lifecycle and user-driven selection

Two ways to control the map

• Declarative — change building / room props; the SDK issues the matching commands.
• Imperative — ref (or onReady) gives you a WaylocateMap for camera, directions, getState(), and extra event subscriptions.

Custom layout — useCampusMap

import { useRef } from "react";
import { useCampusMap } from "@waylocate/embed/react";

function MyMap() {
  const containerRef = useRef<HTMLDivElement>(null);
  const { map, status, error } = useCampusMap({
    containerRef,
    campus: "ucba",
    building: "muntz-hall",
  });

  return <div ref={containerRef} data-status={status} />;
}

Try the SDK playground for a live example.