Render trip progress information
Note
This example is a part of the Navigation SDK Examples. You can find the values for all referenced resources in the res directory. For example, see res/values/strings.xml for R.string.* references used in this example. The dependencies can be found here.The examples use View binding.See setup documention if necessary.
mapbox_activity_trip_progress
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.mapbox.maps.MapView
android:id="@+id/mapView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/actionButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="@drawable/mapbox_button"
android:padding="12dp"
android:text="Fetch routes"
android:textAllCaps="false"
android:textColor="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:ignore="HardcodedText" />
<com.mapbox.navigation.ui.components.tripprogress.view.MapboxTripProgressView
android:id="@+id/tripProgressView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- Uncomment the following line of code to customize the MapboxTripProgressView -->
<!-- style="@style/MapboxCustomTripProgressStyle" -->
</com.mapbox.navigation.ui.components.tripprogress.view.MapboxTripProgressView>
</androidx.constraintlayout.widget.ConstraintLayout>
ShowTripProgressActivity.kt
package com.mapbox.navigation.examples.standalone.tripprogress
import android.annotation.SuppressLint
import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.isVisible
import com.mapbox.api.directions.v5.models.RouteOptions
import com.mapbox.common.location.Location
import com.mapbox.geojson.Point
import com.mapbox.maps.CameraOptions
import com.mapbox.maps.EdgeInsets
import com.mapbox.maps.plugin.animation.MapAnimationOptions
import com.mapbox.maps.plugin.animation.camera
import com.mapbox.maps.plugin.locationcomponent.location
import com.mapbox.navigation.base.ExperimentalPreviewMapboxNavigationAPI
import com.mapbox.navigation.base.extensions.applyDefaultNavigationOptions
import com.mapbox.navigation.base.extensions.applyLanguageAndVoiceUnitOptions
import com.mapbox.navigation.base.formatter.DistanceFormatterOptions
import com.mapbox.navigation.base.options.NavigationOptions
import com.mapbox.navigation.base.route.NavigationRoute
import com.mapbox.navigation.base.route.NavigationRouterCallback
import com.mapbox.navigation.base.route.RouterFailure
import com.mapbox.navigation.base.route.RouterOrigin
import com.mapbox.navigation.core.MapboxNavigation
import com.mapbox.navigation.core.directions.session.RoutesObserver
import com.mapbox.navigation.core.lifecycle.MapboxNavigationApp
import com.mapbox.navigation.core.lifecycle.MapboxNavigationObserver
import com.mapbox.navigation.core.lifecycle.requireMapboxNavigation
import com.mapbox.navigation.core.replay.route.ReplayProgressObserver
import com.mapbox.navigation.core.replay.route.ReplayRouteMapper
import com.mapbox.navigation.core.trip.session.LocationMatcherResult
import com.mapbox.navigation.core.trip.session.LocationObserver
import com.mapbox.navigation.core.trip.session.RouteProgressObserver
import com.mapbox.navigation.examples.databinding.MapboxActivityTripProgressBinding
import com.mapbox.navigation.examples.standalone.camera.ShowCameraTransitionsActivity
import com.mapbox.navigation.examples.standalone.routeline.RenderRouteLineActivity
import com.mapbox.navigation.tripdata.progress.api.MapboxTripProgressApi
import com.mapbox.navigation.tripdata.progress.model.DistanceRemainingFormatter
import com.mapbox.navigation.tripdata.progress.model.EstimatedTimeToArrivalFormatter
import com.mapbox.navigation.tripdata.progress.model.TimeRemainingFormatter
import com.mapbox.navigation.tripdata.progress.model.TripProgressUpdateFormatter
import com.mapbox.navigation.ui.components.tripprogress.view.MapboxTripProgressView
import com.mapbox.navigation.ui.maps.NavigationStyles
import com.mapbox.navigation.ui.maps.location.NavigationLocationProvider
import com.mapbox.navigation.ui.maps.route.arrow.api.MapboxRouteArrowApi
import com.mapbox.navigation.ui.maps.route.arrow.api.MapboxRouteArrowView
import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineApi
import com.mapbox.navigation.ui.maps.route.line.api.MapboxRouteLineView
import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineApiOptions
import com.mapbox.navigation.ui.maps.route.line.model.MapboxRouteLineViewOptions
import java.util.Date
/**
* The example demonstrates how to draw trip progress information during active navigation.
*
* Before running the example make sure you have put your access_token in the correct place
* inside [app/src/main/res/values/mapbox_access_token.xml]. If not present then add this file
* at the location mentioned above and add the following content to it
*
* <?xml version="1.0" encoding="utf-8"?>
* <resources xmlns:tools="http://schemas.android.com/tools">
* <string name="mapbox_access_token"><PUT_YOUR_ACCESS_TOKEN_HERE></string>
* </resources>
*
* The example assumes that you have granted location permissions and does not enforce it. However,
* the permission is essential for proper functioning of this example. The example also uses replay
* location engine to facilitate navigation without actually physically moving.
*
* The example uses camera API's exposed by the Maps SDK rather than using the API's exposed by the
* Navigation SDK. This is done to make the example concise and keep the focus on actual feature at
* hand. To learn more about how to use the camera API's provided by the Navigation SDK look at
* [ShowCameraTransitionsActivity]
*
* How to use this example:
* - The example uses a list of predefined coordinates that will be used to fetch a route.
* - When the example starts, the camera transitions to the location where the route origin is.
* - Click on Fetch Route to fetch a route and start navigation.
* - You should now start to navigate and see trip progress information throughout the trip.
*
* Note:
* The example does not demonstrates the use of [MapboxRouteArrowApi] and [MapboxRouteArrowView].
* Take a look at [RenderRouteLineActivity] example to learn more about route line and route arrow.
*/
@OptIn(ExperimentalPreviewMapboxNavigationAPI::class)
class ShowTripProgressActivity : AppCompatActivity() {
private val routeCoordinates = listOf(
Point.fromLngLat(-122.4192, 37.7627),
Point.fromLngLat(-122.4106, 37.7676),
)
/**
* Debug observer that makes sure the replayer has always an up-to-date information to generate mock updates.
*/
private lateinit var replayProgressObserver: ReplayProgressObserver
/**
* [NavigationLocationProvider] is a utility class that helps to provide location updates generated by the Navigation SDK
* to the Maps SDK in order to update the user location indicator on the map.
*/
private val navigationLocationProvider = NavigationLocationProvider()
/**
* Bindings to the example layout.
*/
private lateinit var binding: MapboxActivityTripProgressBinding
/**
* Additional route line options are available through the [MapboxRouteLineViewOptions].
*/
private val options: MapboxRouteLineViewOptions by lazy {
MapboxRouteLineViewOptions.Builder(this)
.routeLineBelowLayerId("road-label-navigation")
.build()
}
/**
* This class is responsible for rendering route line related mutations generated by the [routeLineApi]
*/
private val routeLineView by lazy {
MapboxRouteLineView(options)
}
/**
* Generates updates for the [routeLineView] with the geometries and properties of the routes that should be drawn on the map.
*/
private val routeLineApi: MapboxRouteLineApi by lazy {
MapboxRouteLineApi(MapboxRouteLineApiOptions.Builder().build())
}
/**
* The data in the [MapboxTripProgressView] is formatted by different formatting implementations.
* Below are default formatters using default options but you can use your own formatting
* classes.
*/
private val tripProgressFormatter: TripProgressUpdateFormatter by lazy {
/**
* Here a distance formatter with default values is being created. The distance remaining formatter can also come from
* MapboxNavigation just be sure it is instantiated and configured first. The formatting options in MapboxNavigation
* can be found at: MapboxNavigation.navigationOptions.distanceFormatterOptions
*/
val distanceFormatterOptions =
DistanceFormatterOptions.Builder(this).build()
/**
* These are Mapbox formatters being created with default values. You can provide your own custom formatters by implementing
* the appropriate interface. The expected output of a formatter is a SpannableString that is applied to the the view
* component in [MapboxTripProgressView].
*/
TripProgressUpdateFormatter.Builder(this)
.distanceRemainingFormatter(DistanceRemainingFormatter(distanceFormatterOptions))
.timeRemainingFormatter(TimeRemainingFormatter(this))
.estimatedTimeToArrivalFormatter(EstimatedTimeToArrivalFormatter(this))
.build()
}
/**
* The methods in this API is used to fetch trip progress related information.
*/
private val tripProgressApi: MapboxTripProgressApi by lazy {
MapboxTripProgressApi(tripProgressFormatter)
}
/**
* Gets notified with location updates.
*
* Exposes raw updates coming directly from the location services
* and the updates enhanced by the Navigation SDK (cleaned up and matched to the road).
*/
private val locationObserver = object : LocationObserver {
/**
* Invoked as soon as the [Location] is available.
*/
override fun onNewRawLocation(rawLocation: Location) {
// Not implemented in this example. However, if you want you can also
// use this callback to get location updates, but as the name suggests
// these are raw location updates which are usually noisy.
}
/**
* Provides the best possible location update, snapped to the route or
* map-matched to the road if possible.
*/
override fun onNewLocationMatcherResult(locationMatcherResult: LocationMatcherResult) {
val enhancedLocation = locationMatcherResult.enhancedLocation
navigationLocationProvider.changePosition(
enhancedLocation,
locationMatcherResult.keyPoints,
)
// Invoke this method to move the camera to your current location.
updateCamera(
Point.fromLngLat(
enhancedLocation.longitude,
enhancedLocation.latitude
),
enhancedLocation.bearing
)
}
}
/**
* This is one way to keep the route(s) appearing on the map in sync with
* MapboxNavigation. When this observer is called the route data is used to draw route(s)
* on the map.
*/
private val routesObserver: RoutesObserver = RoutesObserver { routeUpdateResult ->
routeLineApi.setNavigationRoutes(
routeUpdateResult.navigationRoutes
) { value ->
binding.mapView.mapboxMap.style?.apply {
routeLineView.renderRouteDrawData(this, value)
}
}
}
/**
* Gets notified with progress along the currently active route.
*/
private val routeProgressObserver = RouteProgressObserver { progress ->
val tripProgress = tripProgressApi.getTripProgress(progress)
binding.tripProgressView.render(tripProgress)
}
private val mapboxNavigation: MapboxNavigation by requireMapboxNavigation(
onResumedObserver = object : MapboxNavigationObserver {
@SuppressLint("MissingPermission")
override fun onAttached(mapboxNavigation: MapboxNavigation) {
mapboxNavigation.registerRoutesObserver(routesObserver)
mapboxNavigation.registerLocationObserver(locationObserver)
mapboxNavigation.registerRouteProgressObserver(routeProgressObserver)
replayProgressObserver = ReplayProgressObserver(mapboxNavigation.mapboxReplayer)
mapboxNavigation.registerRouteProgressObserver(replayProgressObserver)
mapboxNavigation.startReplayTripSession()
}
override fun onDetached(mapboxNavigation: MapboxNavigation) {
mapboxNavigation.unregisterRoutesObserver(routesObserver)
mapboxNavigation.unregisterLocationObserver(locationObserver)
mapboxNavigation.unregisterRouteProgressObserver(routeProgressObserver)
mapboxNavigation.unregisterRouteProgressObserver(replayProgressObserver)
mapboxNavigation.mapboxReplayer.finish()
}
},
onInitialize = this::initNavigation
)
@SuppressLint("SetTextI18n")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = MapboxActivityTripProgressBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.mapView.mapboxMap.loadStyle(NavigationStyles.NAVIGATION_DAY_STYLE) {
binding.actionButton.isVisible = true
binding.actionButton.setOnClickListener {
fetchRoute()
}
}
}
override fun onDestroy() {
super.onDestroy()
routeLineView.cancel()
routeLineApi.cancel()
}
private fun initNavigation() {
MapboxNavigationApp.setup(
NavigationOptions.Builder(this)
.build()
)
binding.mapView.location.apply {
setLocationProvider(navigationLocationProvider)
enabled = true
}
replayOriginLocation()
}
private fun setNavigationRoutes(routes: List<NavigationRoute>) {
binding.actionButton.isVisible = false
binding.tripProgressView.isVisible = true
mapboxNavigation.setNavigationRoutes(routes)
}
private fun fetchRoute() {
mapboxNavigation.requestRoutes(
RouteOptions.builder()
.applyDefaultNavigationOptions()
.applyLanguageAndVoiceUnitOptions(this)
.alternatives(false)
.coordinatesList(routeCoordinates)
.layersList(listOf(mapboxNavigation.getZLevel(), null))
.build(),
object : NavigationRouterCallback {
override fun onRoutesReady(
routes: List<NavigationRoute>,
@RouterOrigin routerOrigin: String
) {
setNavigationRoutes(routes)
}
override fun onFailure(
reasons: List<RouterFailure>,
routeOptions: RouteOptions
) {
Log.d(LOG_TAG, "onFailure: $reasons")
}
override fun onCanceled(
routeOptions: RouteOptions,
@RouterOrigin routerOrigin: String
) {
Log.d(LOG_TAG, "onCanceled")
}
}
)
}
private fun replayOriginLocation() {
with(mapboxNavigation.mapboxReplayer) {
play()
pushEvents(
listOf(
ReplayRouteMapper.mapToUpdateLocation(
Date().time.toDouble(),
routeCoordinates.first()
)
)
)
playFirstLocation()
playbackSpeed(3.0)
}
}
private fun updateCamera(point: Point, bearing: Double? = null) {
val mapAnimationOptions = MapAnimationOptions.Builder().duration(1500L).build()
binding.mapView.camera.easeTo(
CameraOptions.Builder()
// Centers the camera to the lng/lat specified.
.center(point)
// specifies the zoom value. Increase or decrease to zoom in or zoom out
.zoom(17.0)
// adjusts the bearing of the camera measured in degrees from true north
.bearing(bearing)
// adjusts the pitch towards the horizon
.pitch(45.0)
// specify frame of reference from the center.
.padding(EdgeInsets(1000.0, 0.0, 0.0, 0.0))
.build(),
mapAnimationOptions
)
}
private companion object {
val LOG_TAG: String = ShowTripProgressActivity::class.java.simpleName
}
}
Was this example helpful?