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.
Leverage Multi-Stop Navigation in Your App
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
Optimized multi-stop navigation
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.
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
):
To omit the numbering of the icons, set the numbered
boolean parameter to false
:
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.
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:
Last updated