Waylocate for developers

Waylocate renders public campus maps with indoor floor plans and wayfinding. This site documents how to put one of those maps inside your own product and control it from your own code.

Written against @waylocate/embed@0.2.1, which speaks wire protocol waylocate: 1.

What an integration looks like

The map runs on Waylocate's servers. In a React app you render <CampusMap>; the SDK mounts the map inside your layout and exposes the same command and event surface as the lower-level API.

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

export function VenueMap() {
  return (
    <CampusMap
      campus="ucba"
      building="muntz-hall"
      room="bookstore-126"
      className="h-[420px] w-full"
      onSelectionChange={(selection, meta) => {
        if (meta.source === "user") openBookingPanel(selection.room);
      }}
    />
  );
}

The map above is live. It uses the same React component as the snippet. For vanilla JavaScript, an existing iframe, or a static embed, see Integration.

What this site covers

The pages are ordered so that reading them front to back builds up the whole picture. Each section assumes only the ones before it.

Section	Answers
Getting started	How do I install this and get a map on screen?
How the embed works	What am I actually holding, and what is running where?
Integration	Which of the four ways to embed fits my stack?
Controlling the map	What can I command, and what will the map tell me?
Configuration	What can I set without writing JavaScript?
Demos	Can I try commands before I write any code?
Protocol reference	What is on the wire, if I need to implement it myself?
Compatibility	What is stable, and what happens when either side updates?

Related documentation

Campus maps are built from a shared venue and floor model. If you are working with the underlying data rather than the embed, see the spatial intelligence documentation.