Skip to content

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.

  1. Open the Wayfinding panel in the editor
  2. Select the Corridor tool
  3. Click on the map to draw path segments along hallways and corridors
  4. 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:

  1. Select an area
  2. Click Connect to Corridor in the wayfinding panel
  3. 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:

  1. Select the Transition tool
  2. Place a transition point at an elevator, staircase, or escalator on one level
  3. Place a matching transition point on the connected level
  4. 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

  1. Click Test Route in the wayfinding panel
  2. Select an origin area or marker
  3. Select a destination
  4. 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

IssueCauseFix
"Route not found"Areas not connected to corridorsConnect all areas to the corridor network
Route goes through wallsCorridors drawn through non-walkable areasRedraw corridors along actual walkways
Cross-floor route failsMissing floor transitionAdd transition points between the floors

Layota Documentation