Comment on page
Directions Service
Ready to add indoor navigation to your app with MapsIndoors SDK?
This guide will show you how to implement directions, render routes, and interact with them in your application.
Design
- Would you like to show textual directions in a UI?
- What will your user interface look like?
- What will the user experience be like
- Would you like to show directions on the map?
- How will the end user let the map know it's time to update with the next part of their journey?

Creating and combining the interfaces and the map view.

Determining the scope and simplicity of your end user experience should be a big focus when implementing the MapsIndoors SDK
From an implementation standpoint, there are two functional things that need to be taken care of.
- 1.Setting up and requesting directions


The first step in getting directions is initializaing the directions service instance. By passing the externalDirectionsProvider, the MapsIndoors SDK will handle merging responses from the base map, e.g. outdoor directions that will charge billable requests if you request from somewhere else other than MapsIndoors data (e.g. an end users house, to somewhere indoors.)
The class
DirectionsService
is used to request routes from one point to another. The minimal required input is an origin
and a destination
. Mapbox (required parameter of the DirectionsService instance)
const externalDirectionsProvider = new mapsindoors.directions.MapboxProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
Google (not required for legacy reasons, but recommended to pass an externalDirectionsProvider as a parameter)
const externalDirectionsProvider = new mapsindoors.directions.GoogleMapsProvider();
const miDirectionsServiceInstance = new mapsindoors.services.DirectionsService(externalDirectionsProvider);
In the below example, the coordinates are hard coded, but you'll likely want to retrieve them from location objects. It's recommended to get those from the anchor points, e.g.
lat: originLocation.properties.anchor.coordinates[1], lng: originLocation.properties.anchor.coordinates[0], floor: originLocation.properties.floor
const routeParameters = {
origin: { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }, // Oval Office, The White House
destination: { lat: 38.897579747054046, lng: -77.03658652944773, floor: 1 } // Blue Room, The White House
};
miDirectionsServiceInstance.getRoute(routeParameters).then(directionsResult => {
console.log(directionsResult);
});
In MapsIndoors, the transportation mode is referred to as travel mode. There are four travel modes, walking, bicycling, driving and transit (public transportation). The travel modes generally apply to outdoor navigation. Indoor navigation calculations are based on walking travel mode.
Set travel mode on your request using the
travelMode
property on routeParameters
:const routeParameters = {
origin: { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }, // Oval Office, The White House
destination: { lat: 38.897579747054046, lng: -77.03658652944773, floor: 1 }, // Blue Room, The White House
travelMode: 'WALKING'
};
Relevant for outdoor directions only
- DRIVING
- BYCYCLING
- WALKING
- TRANSIT (Only supported with Google Maps as the external provider)
For a wheelchair user or a user with physical disabilities it could be relevant to request a Route that avoids stairs, escalators and steps.
Set avoid stairs on your request using the
avoidStairs
property on routeParameters
:const routeParameters = {
origin: { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }, // Oval Office, The White House
destination: { lat: 38.897579747054046, lng: -77.03658652944773, floor: 1 }, // Blue Room, The White House
avoidStairs: 'true'
};
Application User Roles is a feature that lets you define various roles, you can assign to your users. In the context of route calculation, the feature is used to differentiate routing from one user type to the another. In the MapsIndoors CMS it is possible to restrict paths and doors in the route network for certain User Roles.
You can get available Roles for your MapsIndoors Solution with the help of the
SolutionsService:
mapsindoors.services.SolutionsService.getUserRoles().then(userRoles => {
console.log(userRoles);
});
User Roles can be set on a global level using
mapsindoors.MapsIndoors.setUserRoles()
.mapsindoors.MapsIndoors.setUserRoles(['myUserRoleId']);
This will affect all following Directions requests, visibility of Locations as well as search queries with
LocationsService
. Be mindful of what restrictions are set on locations if your solution is to utilize user roles within MapsIndoors.Set a departure date or an arrival date on the route using the
transitOptions
property. It will only make sense to set one of these properties at a time. This parameter is only implemented on our side with Google Maps, not Mapbox.
const departureDate = new Date(new Date().getTime() + 30*60000); // 30 minutes from now
const routeParameters = {
origin: { lat: 38.897389429704695, lng: -77.03740973527613, floor: 0 }, // Oval Office, The White House
destination: { lat: 38.897579747054046, lng: -77.03658652944773, floor: 1 }, // Blue Room, The White House
travelMode: 'TRANSIT',
transitOptions: {
departureTime: departureDate
}
};
For more information about available options on thetransitOption
object, see google.com/maps/documentation.
Additional reading
Last modified 1mo ago