The ConsumerMapStyle
class has setter and getter methods that provide you with dynamic customization
for markers and polylines. This class is exposed asynchronously using the
ConsumerController.getConsumerMapStyle()
method.
UI customization persists across device rotations and remains in effect until the
ConsumerController
is detached.
Custom markers
The method for setting the marker type and its properties is ConsumerMapStyle.setMarkerStyleOptions()
. Your custom
marker options override the default values provided by the Consumer SDK.
To restore the default values, call setMarkerStyleOptions()
using null
for the MarkerOptions
parameter. Retrieve the active MarkerOptions
using
getMarkerStyleOptions()
.
Marker types
The following markers are available for customization:
TRIP_PICKUP_POINT
TRIP_DROPOFF_POINT
TRIP_INTERMEDIATE_DESTINATION
TRIP_VEHICLE
TRIP_PICKUP_POINT
and TRIP_DROPOFF_POINT
display during trip monitoring.
TRIP_VEHICLE
displays during trip monitoring. The marker icon does not change
according to the actual vehicle type for the trip. The Consumer SDK updates
the rotation of the TRIP_VEHICLE
icon during trip monitoring to mimic the
behavior of the actual vehicle as it travels the route.
Marker options
The customizable properties available for each marker are the set of
properties provided by Google Maps
MarkerOptions
.
MarkerOptions
is built using its constructor, and the customized properties are specified using 'Setter' style methods.
Default values are provided for each property, so you only need to specify custom values.
You can turn off a marker by setting visible
to false
.
Enough data should be provided to allow you to use your own UI element in its place.
Example
Java
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setMarkerStyleOptions(
MarkerType.TRIP_VEHICLE,
new MarkerOptions()
.visible(false));
});
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);
Kotlin
// Initializing marker options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
})
// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)
Custom polylines
Polyline customization is set using the ConsumerMapStyle.setPolylineStyleOptions
method. Setting custom polyline options
overrides the default values provided by the Consumer SDK. The default values
can be restored by calling setPolylineStyleOptions
with null for the PolylineOptions
parameter. The active
PolylineOptions
can be retrieved using the
getPolylineStyleOptions
method.
Polyline types
The following polyline types are available for customization:
ACTIVE_ROUTE
REMAINING_ROUTE
ACTIVE_ROUTE
and REMAINING_ROUTE
are displayed during trip monitoring and
represent the vehicle's route.
Polyline Properties
The customizable properties available for each polyline are provided by Google Maps PolylineOptions
.
PolylineOptions
is built using its constructor, and the customized properties are specified using 'Setter' style methods. Default values
are provided for each property, so you only need to specify custom values.
You can turn off the polyline by setting visible
to false
.
Example
Java
// Initializing polyline style options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.visible(false));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().visible(false)
)
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
Active and Remaining Route
With Trip and Order Progress enabled, your app can customize the user's experience using polylines showing your vehicles active and remaining route.
The active route is the path the vehicle is currently traveling to reach the next waypoint in the consumer's active trip. The remaining route is the path the vehicle will travel past the active route. When the active route waypoint is the last trip waypoint, the remaining route does not exist.
Active and remaining polylines can be customized and visibility controlled by your app. By default, the active route is visible and the remaining route is not visible.
Example
Java
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener(
consumerMapStyle -> {
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
new PolylineOptions()
.color(Color.BLUE));
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
new PolylineOptions()
.color(Color.BLACK)
.width(5)
.visible(true));
});
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);
Kotlin
// Initializing polyline options.
consumerController
.getConsumerMapStyle()
.addOnSuccessListener({ consumerMapStyle ->
{
consumerMapStyle.setPolylineStyleOptions(
PolylineType.ACTIVE_ROUTE,
PolylineOptions().color(Color.BLUE)
)
consumerMapStyle.setPolylineStyleOptions(
PolylineType.REMAINING_ROUTE,
PolylineOptions().color(Color.BLACK).width(5).visible(true)
)
}
})
// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)
Traffic-aware polylines
The traffic layer of the polyline is disabled by default. When it is enabled, segments representing stretches of non-normal traffic are drawn above the route polyline at the z-index PolylineOptions.getZIndex() plus an offset depending on the traffic condition.
Traffic conditions are represented as one of four speed types. You can customize the color for each speed type.
In order to enable the "Traffic-aware polylines", you must construct a TrafficStyle
object which then will be passed to ConsumerMapStyle
by calling setPolylineTrafficStyle()
.
Example
Java
// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build();
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);
Kotlin
// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
.setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build()
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)
Adjusting the camera zoom to focus on a journey
The default My Location button built in to the Maps SDK centers the camera on the device location. If there is an active Trip and Order Progress session, you may want to center the camera to focus on the journey rather than the device location.
Consumer SDK for Android built-in solution: AutoCamera
To let you focus on the journey instead of the device location, the Consumer SDK provides an AutoCamera feature that is enabled by default. The camera zooms to focus on the Trip and Order Progress route and the next trip waypoint.
Customizing camera behavior
If you require more control of camera behavior, you can disable or enable
AutoCamera using ConsumerController.setAutoCameraEnabled()
.
ConsumerController.getCameraUpdate()
returns the recommended camera bounds at that moment. You can
then provide this CameraUpdate
as an argument to
GoogleMap.moveCamera()
or GoogleMap.animateCamera()
.
Cloud-based maps styling
Both the
ConsumerMapView
and the
ConsumerMapFragment
classes support cloud-based maps styling.
In order to use cloud-based maps styling, ensure that the selected maps
renderer is LATEST
. The following examples show how to use
cloud-based maps styling with your project.
ConsumerMapView
To use cloud-based maps styling in the ConsumerMapView
, set the
mapId
field on GoogleMapOptions
and pass the GoogleMapOptions
to
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity,
GoogleMapOptions)
Example
Java
public class SampleAppActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ConsumerMapView mapView = findViewById(R.id.consumer_map_view);
if (mapView != null) {
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
mapView.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId);
}
}
}
Kotlin
class SampleAppActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
mapView.getConsumerGoogleMapAsync(
object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
},
/* fragmentActivity= */ this,
/* googleMapOptions= */ optionsWithMapId)
}
}
ConsumerMapFragment
There are two ways to use cloud-based maps styling in ConsumerMapFragments:
- Statically with the XML.
- Dynamically with
newInstance
.
Statically with the XML
To use cloud-based maps styling with the XML in the
ConsumerMapFragment
, add the map:mapId
XML attribute with the specified
mapId
. See the following example:
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
android:id="@+id/consumer_map_fragment"
map:mapId="map-id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Dynamically with newInstance
To use cloud-based maps styling with newInstance
in
ConsumerMapFragment
, set the mapId
field on GoogleMapOptions
and pass the
GoogleMapOptions
to newInstance
. See the following example:
Java
public class SampleFragmentJ extends Fragment {
@Override
public View onCreateView(
@NonNull LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);
GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);
getParentFragmentManager()
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit();
consumerMapFragment.getConsumerGoogleMapAsync(
new ConsumerMapReadyCallback() {
@Override
public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
// ...
}
});
return view;
}
}
Kotlin
class SampleFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)
val optionsWithMapId = GoogleMapOptions().mapId("map-id")
val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)
parentFragmentManager
.beginTransaction()
.add(R.id.consumer_map_fragment, consumerMapFragment)
.commit()
consumerMapFragment.getConsumerGoogleMapAsync(
object : ConsumerMapReadyCallback() {
override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
// ...
}
})
return view
}
}