Indoor Routing

Calculate and display a turn-by-turn route between two points on the indoor map. The API handles path computation, accessibility constraints, and animated route overlay rendering.

Prerequisites

• A working map embed — complete Embed your first map first.
• You need at least two entity IDs from your property. Tap entities on the map and read them from the select event — see Map events.
• The map must be ready before calling routing methods. Put routing calls inside the onload callback.

Steps

1. Set default routing configuration

Call setDefaultRoutingConfig once during initialization to configure accessibility preferences and route constraints. These settings apply to every subsequent applyBoost call unless overridden.

The DefaultCustomRoutingConfig interface contains these fields (all boolean):

Field	Default	Description
accessibility	false	When true, routes avoid stairs and escalators (step-free).
OptimizeItinerary	false	When true, use the shortest-path optimizer.
IncludeElevators	true	Allow elevators in multi-floor routes.
IncludeEscalators	true	Allow escalators in multi-floor routes.
IncludeStairs	true	Allow stairs in multi-floor routes.
IncludeRamps	true	Allow ramps in multi-floor routes.
PreferIndoorRoute	true	Prefer indoor path segments.
PreferOutdoorRoute	false	Prefer outdoor path segments.

V2/V3 routing config method deprecated

mapsted.maps.setDefaultCustomRoutingConfig() is a deprecated V2/V3 compatibility shim. It emits a console.warn and throws MAPSTED-1093 in strict mode. Use the canonical method setDefaultRoutingConfig() shown throughout this page.

mapsted.maps.init({
  element: document.getElementById("mapsted-map"),
  propertyId: 603,
  onload: function () {
    mapsted.maps.setDefaultRoutingConfig({
      accessibility: false,        // set true for step-free routing
      OptimizeItinerary: false,
      IncludeElevators: true,
      IncludeEscalators: true,
      IncludeStairs: true,
      IncludeRamps: true,
      PreferIndoorRoute: true,
      PreferOutdoorRoute: false
    });
  }
});

2. Create a boost routing request

A "boost" is the API term for an action applied to the map. Use the createBoostRouting factory to build a typed route boost from a "buildingId:entityId,buildingId:entityId" string. The IDs below are real entities on the University of Windsor demo property (603) — building 710 is the CAW Student Centre, entity 302 is Information 192, and entity 3764 is Fairtrade Coffee on the same floor, so the drawn route stays on one floor.

const boost = mapsted.maps.createBoostRouting({
  routing: "710:302,710:3764"
});

3. Apply the route with applyBoost

Pass the boost to applyBoost. The API computes the path and draws it on the map immediately. The camera pans to frame the full route.

mapsted.maps.applyBoost(boost);

Map host

The embedded sandbox loads property 603 from the production map host (maps.mapsted.com), which is the value of the mapsDomain init option. Route drawing works exactly the same in your own embed — the code shown is correct.

Open in Sandbox ↗

4. Listen for navigation start

Subscribe to the navigationStart event to know when the route overlay has been drawn.

V2/V3 addEventListener deprecated

mapsted.maps.addEventListener('navigationStart', fn) is a deprecated V2/V3 compatibility shim — it emits a console.warn and throws MAPSTED-1093 in strict mode. Use the canonical on() shown below.

The NavigationData payload shape is:

{
  routing?: string;      // "buildingId:entityId,buildingId:entityId" pairs for the route
  routeOptions?: string; // comma-separated option flags actually applied, e.g. "IncludeElevators"
}

Note. NavigationData does not include totalDistance, estimatedTime, or step-by-step instructions — these are not part of the public API surface. Use routing to identify waypoints and routeOptions to confirm which constraints were applied.

mapsted.maps.on("navigationStart", function (payload) {
  console.log("Route started");
  // Parse the routing string to get waypoints
  if (payload.routing) {
    var waypoints = payload.routing.split(",");
    console.log("Waypoints (" + waypoints.length + "):", waypoints.join(" → "));
  }
  // Confirm which route options were applied
  if (payload.routeOptions) {
    console.log("Applied options:", payload.routeOptions);
  }
});

5. Enable accessibility mode for step-free routing

The Mapsted Maps JavaScript API exposes a dedicated setAccessibilityMode(enabled: boolean) helper that sets the full accessibility routing config in one call. It is equivalent to manually setting accessibility: true, IncludeElevators: true, IncludeEscalators: false, IncludeStairs: false, IncludeRamps: true in setDefaultRoutingConfig.

// Enable step-free routing
await mapsted.maps.setAccessibilityMode(true);

// Revert to standard routing
await mapsted.maps.setAccessibilityMode(false);

Wire it to a toggle button:

const toggle = document.getElementById('accessibility-toggle');
toggle.addEventListener('change', function () {
  mapsted.maps.setAccessibilityMode(toggle.checked);
});

Alternatively, pass the full config to setDefaultRoutingConfig for granular control:

// Wire your own UI toggle to re-configure routing mode.
const toggle = document.getElementById("accessibility-toggle");
toggle.addEventListener("change", function () {
  mapsted.maps.setDefaultRoutingConfig({
    accessibility: toggle.checked,  // true = step-free (avoids stairs/escalators)
    OptimizeItinerary: false,
    IncludeElevators: true,
    IncludeEscalators: !toggle.checked, // exclude escalators in step-free mode
    IncludeStairs: !toggle.checked,     // exclude stairs in step-free mode
    IncludeRamps: true,
    PreferIndoorRoute: true,
    PreferOutdoorRoute: false
  });
});

6. Clear the route

Call clearRoute() to remove the active route overlay.

mapsted.maps.clearRoute();

Full example

mapsted.maps.init({
  element: document.getElementById("mapsted-map"),
  propertyId: 603,
  onload: function () {
    mapsted.maps.setDefaultRoutingConfig({
      accessibility: false,
      OptimizeItinerary: false,
      IncludeElevators: true,
      IncludeEscalators: true,
      IncludeStairs: true,
      IncludeRamps: true,
      PreferIndoorRoute: true,
      PreferOutdoorRoute: false
    });

    mapsted.maps.on("navigationStart", function (payload) {
      // NavigationData: { routing?: string, routeOptions?: string }
      var routeInfo = document.getElementById("route-info");
      if (routeInfo) {
        var waypoints = payload.routing ? payload.routing.split(",").length : 0;
        routeInfo.textContent = "Route active — " + waypoints + " waypoint(s)"
          + (payload.routeOptions ? " | options: " + payload.routeOptions : "");
      }
    });

    document.getElementById("start-route").addEventListener("click", function () {
      const boost = mapsted.maps.createBoostRouting({
        routing: "710:302,710:3764"
      });
      mapsted.maps.applyBoost(boost);
    });
  }
});

Open in Sandbox ↗

Note. The in-page sandbox only ships a #mapsted-map container. The "Full example" above wires #start-route / #route-info buttons that you would add to your own page. The embedded sandbox runs a variation that drives the same APIs via setTimeout + console logs so it executes without those DOM elements.

Expected output

Clicking the route button (or letting the embed's timed demo fire) draws a colored path on the map connecting the two entities. The camera animates to frame the entire route. The navigationStart event fires with routing (waypoint string) and routeOptions (applied constraint flags). Multi-floor routes include elevator or ramp transitions when accessibility: true is set.

Next steps

• Measure raw walking distance without drawing a route: Distance calculation
• Navigate to the destination floor before routing: Floor navigation