Multi-stop navigation
Last updated
Last updated
This article builds on existing knowledge and assumes familiarity with the and the .
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 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.
To omit the numbering of the icons, set the numbered
boolean parameter to false
:
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 get a route with multiple stops along the path, use the in combination with the stops parameter. The stops parameter takes an array of
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 on the to create a more customized experience.
To customize the icons used for route stops, you can provide a . For example, to set the fill color to blue (#00f
):
To add labels to your stops, create a Map of objects, using the stop index as the key, and the RouteStopConfig as the value. The offers a label
property that you can set to the desired text for the stop label.
The object also lets you configure a different for the individual stops. The class allows customizing the fill color of the default icon as shown previously. The has the iconProvider
property, which can be used to override the 's for the individual stops.
Here is an example of how to use the to customize the background color of specific stop icons: