Navigation State

Drop-In UI not only provides a turn-by-turn experience but also provides a comprehensive state transition leading you to active guidance. The guide below explains each of these navigation states.

Free Drive

This is the default starting state for Drop-In UI. Before a destination and route is established the Drop-In UI can power an experience that will map-match your location to the road network and provide information (e.g. Speed limits, Name of the street you are on, etc). Standalone components that would be prominently displayed in this mode would include:

  • Speed limit
  • User’s location
  • Recenter button
  • A full screen map view
  • Camera control buttons
  • Floating road name label
  • A puck showing users current location and bearing

Destination Preview

Once the NavigationView receives a destination, the UI will drop a marker on the map at the destination provided. Along with the marker, Drop-In UI will also reverse geocode the Point to obtain human readable details of the POI and display it in the info panel. Standalone components that would be prominently displayed in this mode would include:

  • Speed limit
  • User’s location
  • A full screen map view
  • Camera control buttons
  • Floating road name label
  • A marker at the destination
  • A puck showing users current location and bearing
  • Info Panel containing POI information, route preview button, start navigation button and custom area for external views.

Route Preview

After receiving the destination when the user taps on the route overview button, the UI will show preview of the route to the destination, ETA, distance, and duration of travel. If alternative routes are available, they will be displayed and available for selection. Standalone components that would be prominently displayed in this mode would include:

  • A full screen map view
  • Primary route
  • Alternative routes
  • A marker at the destination
  • Camera in the route overview mode
  • Info Panel containing trip progress, start navigation button and custom area for external views.

Active Guidance

After receiving the destination when the user taps on the start navigation button, the UI switches to turn-by-turn navigation. The UI will show clear and prompt information about the driver's place on the route using voice, text, icons and animations on the map. The navigation experience gives information to maximize the driver’s ability to assess their situation with as little interaction as possible. Standalone components that would be prominently displayed in this mode would include:

  • A full screen map view
  • Navigation camera
  • Route Line & Route Arrow with congestion information
  • Road name
  • Camera and Volume control buttons
  • Speed limit
  • Maneuvers
  • A marker at the destination
  • Speech guidance
  • Info Panel containing trip progress, end navigation button and custom area for external views.

Arrival

When approaching the end of the route, additional context of the destination is displayed in the UI. By default the maneuver view will show information about the side of the street that the POI location is on. The bottom area can be configured with a custom view to provide more information about the destination. Standalone components that would be prominently displayed in this mode would include:

  • A full screen map view
  • Navigation camera
  • Route Line & Route Arrow with congestion information
  • Road name
  • Camera and Volume control buttons
  • Speed limit
  • A marker at the destination
  • Speech guidance
  • Info Panel containing arrival text, end navigation button and custom area for external views.