Appearance
Adding Wayfinding
A step-by-step tutorial for setting up indoor navigation in your Layota project.
Prerequisites
- A project with at least one level
- Areas and/or markers placed on the map
- At least two levels if you want cross-floor routing
Step 1: Draw Corridors
Corridors are the walkable paths that the routing engine uses to calculate routes.
- Open the Wayfinding panel in the editor
- Select the Corridor tool
- Click on the map to draw path segments along hallways and corridors
- Create a connected network that reaches all areas
TIP
Draw corridors along the center of hallways. You don't need centimeter precision — the routing engine finds the nearest point on the corridor network.
Step 2: Connect Areas
Each area needs to be connected to the corridor network:
- Select an area
- Click Connect to Corridor in the wayfinding panel
- The nearest corridor node is automatically linked
Repeat for every area that should be reachable via wayfinding.
Step 3: Connect Markers
Same as areas — connect markers to the corridor network so they can be used as route origins or destinations.
Step 4: Add Floor Transitions
For multi-floor routing, you need transition points:
- Select the Transition tool
- Place a transition point at an elevator, staircase, or escalator on one level
- Place a matching transition point on the connected level
- Link them together
Each transition connects a point on Level A to a point on Level B. The routing engine uses these to build cross-floor routes.
Step 5: Test Routes
- Click Test Route in the wayfinding panel
- Select an origin area or marker
- Select a destination
- The route is displayed on the map
Test several scenarios:
- Same-floor route
- Cross-floor route
- Edge cases (opposite ends of the building)
Using Routes in the SDK
typescript
// Build and display a route
map.buildRoute(
{ id: 'entrance', type: 'area', levelId: 'floor-1' },
{ id: 'cafe', type: 'area', levelId: 'floor-2' }
)
// Listen for the result
map.on('routeBuilt', ({ route, levelId }) => {
console.log('Route segments:', route.segments.length)
console.log('Total distance:', route.totalDistance)
})
map.on('routeNotFound', () => {
console.log('No route available between these points')
})
// Clear the route
map.clearRoute()Route Result Structure
typescript
{
segments: [
{
levelId: "floor-1",
points: [{ x: 100, y: 200 }, { x: 150, y: 200 }, ...]
},
{
levelId: "floor-2",
points: [{ x: 300, y: 100 }, { x: 350, y: 150 }, ...]
}
],
totalDistance: 245.5
}Each segment represents a portion of the route on a single floor. The map automatically shows the segment for the current level and indicates floor transitions.
Troubleshooting
| Issue | Cause | Fix |
|---|---|---|
| "Route not found" | Areas not connected to corridors | Connect all areas to the corridor network |
| Route goes through walls | Corridors drawn through non-walkable areas | Redraw corridors along actual walkways |
| Cross-floor route fails | Missing floor transition | Add transition points between the floors |