Skip to main content

Controlling the map

Every integration that runs JavaScript ends with the same object. This section documents what that object can do, namespace by namespace.

Examples use a demonstration campus. Every snippet on this site addresses ucba, a publicly available campus with the building muntz-hall and the room 170. Substitute your own campus slug once you have one. Slugs for your campus are listed in your Waylocate console, and the addressing rules are in the reference grammar.

The shape of a command

Commands are grouped by what they affect and return promises.

await map.selection.setRoom("muntz-hall/170");
await map.camera.flyTo({ zoom: 18, duration: 800 });
await map.directions.start({ from: "here", to: "muntz-hall/170" });

A resolved promise means the map received the command, validated it, and acted on it. A rejected promise carries a WaylocateError with a code you can branch on. Nothing fails silently, and nothing needs a return value checked.

Namespaces

NamespaceControlsPage
map.selectionWhich building, floor, or room is selectedSelection
map.cameraViewport position, animation, and scripted motionCamera
map.directionsThe route being drawnDirections
map.uiWhich interface elements the map showsAppearance
map.getState()A snapshot of everything aboveReading state
map.on()Notifications from the mapEvents

Handle properties

Alongside the namespaces, the handle carries what the map reported about itself during the handshake.

PropertyTypeMeaning
campusstring | nullCampus slug the map is showing
protocolnumberWire protocol version the map speaks
capabilitiesreadonly string[]Commands this map build accepts
buildstring | undefinedMap build identifier, when the deployment reports one

build is opaque. Quote it in a bug report and otherwise ignore it.

Discovering what a map supports

The map lists its commands during the handshake, and the SDK checks that list before sending anything. Calling a command the map does not have fails immediately with UNSUPPORTED rather than hanging until the timeout expires.

You can check the same list yourself, which is how you use a newer command without breaking against older deployments:

if (map.supports("camera.orbit")) {
await map.camera.orbit({ ref: "muntz-hall", secondsPerRevolution: 20 });
} else {
await map.camera.fitTo("muntz-hall");
}

To see the full list for the map you are talking to, read map.capabilities, or send host.hello in the inspector below.

Try any command

The panel below is a complete host implementation: it frames a live map, offers a control for every command in the protocol, logs the events that come back, and shows the raw messages in both directions. It is the fastest way to find out what a command does before writing code against it.

Waiting for map.ready
Host origin
Frame origin
https://waylocate.com
Protocol
not reported yet
Campus
not reported yet
Capabilities
not reported yet
https://waylocate.com/ucba?embed=1&host=&ui=-events
selection.setBuilding

Select a building, optionally on a specific floor.

selection.setFloor

Change floor within the current building.

selection.setRoom

Select a room. The app frames it and opens its panel.

selection.clear

Deselect everything and return to the campus view.

A larger version, with an automated conformance run, is at waylocate.com/embed-demo.

Next

Work through the namespaces in order, or jump to the one you need: