The currently active directions.
The currently active path.
ExperimentalReturns the current tracking mode, or null if no tracking is active.
'tethered' — coordinate is being snapped onto the active path.'travelled' — the traversed portion of the path is being recoloured.The mode is set as soon as trackCoordinate is called (even before the first coordinate is matched). For a stricter "is the visualisation currently active" check, use isTracking.
The current list of floors along the navigation paths.
The current list of floor stacks along the navigation paths.
Returns true if the navigation is for a multi-floor path.
ExperimentalReturns true while the dashed connector line from the tracked coordinate
to the path is being drawn. This only happens in 'tethered' mode when
the coordinate is outside the tether threshold and
coordinateOutsideThresholdMode is 'tether-and-dash' (the default).
ExperimentalReturns true while a coordinate is actively being tracked and visualized on the path.
'tethered' mode this is true whenever a tethered path is drawn or
path segments behind the user have been hidden.'travelled' mode this is true once one or more segments have been
marked as travelled.This is more precise than checking currentTrackingMode: the mode
is set as soon as trackCoordinate is called, but isTracking
only becomes true once the coordinate is successfully matched to the
path. It also becomes false again if coordinateOutsideThresholdMode is
'untether' and a coordinate falls outside the threshold.
ExperimentalReturns the fraction (0–1) of the active path that has been travelled
while in 'travelled' mode. Returns null when not currently tracking
in travelled mode.
Multiply by Navigation.activePath's distance to get the
travelled distance in meters.
In multi-destination mode this reflects progress along the currently active destination's path only — it resets when the active path changes.
Clears any drawn navigation paths or directions from the map.
Draws the specified directions on the map.
The directions to be drawn.
Optional additional options for the navigation.
Highlights path section between two coordinates. This can be used to highlight any section of the path or indicated the currently traveled path.
Optionaloptions: TPathSectionHighlightOptionsSets the active path by index.
ExperimentalStops any active coordinate tracking (tethering or travelled path visualization).
ExperimentalTracks the user's position on the navigation path using the specified mode. Only one tracking mode can be active at a time — switching modes auto-clears the previous mode's visual state.
Call this on every position update (e.g. from BlueDot's dot-position-update
event). Use stopTracking to tear down all tracking state.
The user's current coordinate
Tracking options including mode ('tethered' or 'travelled') and mode-specific options
For 'tethered' mode: path coordinates if successful, null otherwise. For 'travelled' mode: the travelled fraction (0-1) if successful, null otherwise.
// 'tethered' — snap user position onto the closest point on the active path
blueDot.on('dot-position-update', e => {
mapView.Navigation.trackCoordinate(e.position, {
mode: 'tethered',
tetherThresholdDistance: 10,
coordinateOutsideThresholdMode: 'tether-and-dash',
outsideThresholdPathStyle: 'dashed-boxes',
});
});
// 'travelled' — recolour the portion of the path the user has walked past
blueDot.on('dot-position-update', e => {
mapView.Navigation.trackCoordinate(e.position, {
mode: 'travelled',
color: '#999',
});
});
When a user needs to get from point A to point B, drawing a path on the map helps them to navigate to their destination. It can help them to visualize the route they'll need to take, like a good treasure map.
Navigation is a helper class to display wayfinding easily on the map. Functionality of Navigation could be replicated by drawing the paths using Paths and adding well designed tooltips at connection points.
This class is accessed using MapView.Navigation.
Navigation.draw allows for easily drawing multiple components that make up a wayfinding illustration. It shows a human figure to mark the start point, a path with animated directional arrows, pulses in the direction of travel and a pin to mark the destination. Each of these components can be customized to match an app's style.
Refer to the Drawing Navigation in the Wayfinding Guide for more information and interactive examples.