Multi-stop navigation

Last updated 9 months ago

Multi-stop navigation

This article builds on existing knowledge and assumes familiarity with the Directions Service and the Directions Renderer.

The MapsIndoors Javascript SDK empowers you to streamline navigation within venues using the multi-stop feature. This functionality allows you to obtain directions to multiple destinations within a venue effortlessly. Provide a sequence of stops, and MapsIndoors will generate the most efficient route, considering two options:

Navigation with multiple stops: Navigate through the stops in the exact order you specify. This is ideal when the order of visits is crucial.
Optimized multi-stop navigation (traveling salesman algorithm): Let MapsIndoors intelligently reorder your stops to create the fastest possible route, saving you valuable time.

To get a route with multiple stops along the path, use the DirectionsService's getRoute in combination with the stops parameter. The stops parameter takes an array of LatLngLiterals

const origin = { lat: 30.362364120965957, lng: -97.74102144956545 };
const destination = { lat: 30.3603809, lng: -97.7421568, floor: 0 };

const stops = [
    { lat: 30.3603751, lng: -97.7420869, floor: 0 },
    { lat: 30.3604412, lng: -97.7421172, floor: 0 },
    { lat: 30.3604593, lng: -97.7422238, floor: 0 },
];

const routeResult = await miDirectionsServiceInstance.getRoute({
    origin, 
    destination, 
    stops
});

miDirectionsRendererInstance.setRoute(routeResult);

To optimize the route for the most direct path, you can use the optimize parameter. When set to true, this parameter ensures that the stops are ordered to optimize the travel time.

const origin = { lat: 30.362364120965957, lng: -97.74102144956545 };
const destination = { lat: 30.3603809, lng: -97.7421568, floor: 0 };
const stops = [
    { lat: 30.3603751, lng: -97.7420869, floor: 0 },
    { lat: 30.3604412, lng: -97.7421172, floor: 0 },
    { lat: 30.3604593, lng: -97.7422238, floor: 0 },
];

const routeResult = await miDirectionsServiceInstance.getRoute({
    origin, 
    destination, 
    stops,
    // Optimize the route for the fastest travel time
    optimize: true
});

miDirectionsRendererInstance.setRoute(routeResult);

Customizing all Route Stop Icons

The MapsIndoors Javascript SDK offers customization options to tailor the appearance of your multi-stop route. By default, MapsIndoors provides a standard icon to visually represent each stop on your route. However, you can override the DefaultRouteStopIconProvider on the DirectionsRenderer to create a more customized experience.

To customize the icons used for route stops, you can provide a DefaultRouteStopIconProvider. For example, to set the fill color to blue (#00f):

const routeStopIconProvider = new mapsindoors.directions.DefaultRouteStopIconProvider({
    fillColor: '#00f' 
}); 

const directionsRendererOptions = { 
    mapsIndoors: mapsIndoorsInstance,
    defaultRouteStopIconProvider: routeStopIconProvider
};
const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);

To omit the numbering of the icons, set the numbered boolean parameter to false:

const routeStopIconProvider = new mapsindoors.directions.DefaultRouteStopIconProvider({
    fillColor: '#00f',
    numbered: false
}); 

const directionsRendererOptions = { 
    mapsIndoors: mapsIndoorsInstance,
    defaultRouteStopIconProvider: routeStopIconProvider
};

const miDirectionsRendererInstance = new mapsindoors.directions.DirectionsRenderer(directionsRendererOptions);

Adding Labels to Route Stops

The MapsIndoors Javascript SDK allows you to enhance the visual representation of your multi-stop routes by incorporating labels beneath each stop icon. This can provide additional context or information about the stop for users.

To add labels to your stops, create a Map of RouteStopConfig objects, using the stop index as the key, and the RouteStopConfig as the value. The RouteStopConfig offers a label property that you can set to the desired text for the stop label.

const routeStopConfigs = new Map([
    [0, { label: 'John\'s desk' }], 
    [1, { label: 'Meeting room 4' }], 
    [2, { label: 'Jane\'s desk' }]
]);

miDirectionsRendererInstance.setRoute(routeResult, routeStopConfigs);

Customizing Individual Stop Icons

The RouteStopConfig object also lets you configure a different RouteStopIconProvider for the individual stops. The DefaultRouteStopIconProvider class allows customizing the fill color of the default icon as shown previously. The RouteStopConfig has the iconProvider property, which can be used to override the DirectionsRenderer's DefaultRouteStopIconProvider for the individual stops.

Here is an example of how to use the DefaultRouteStopIconProvider to customize the background color of specific stop icons:

const redStopIconProvider = new mapsindoors.directions.DefaultRouteStopIconProvider({
    fillColor: '#f00' // Red background color
});

const greenStopIconProvider = new mapsindoors.directions.DefaultRouteStopIconProvider({
    fillColor: '#0f0', // Green background color
    numbered: false,
});

const routeStopConfigs = new Map([
    [0, { label: 'John\'s desk',  iconProvider: redStopIconProvider}], 
    [1, { label: 'Meeting room 4', iconProvider: greenStopIconProvider }],
    [2, { label: 'Jane\'s desk' }]
]);

miDirectionsRendererInstance.setRoute(routeResult, routeStopConfigs);