Customize route polylines
Stay organized with collections
Save and categorize content based on your preferences.
You customize route polylines using the
ConsumerMapStyle.setPolylineStyleOptions
method. If you set custom polyline
options, they override the default values provided by the Consumer SDK.
To restore the default values, call
setPolylineStyleOptions
with null
for the PolylineOptions
parameter.
To retrieve the active PolylineOptions
, use
getPolylineStyleOptions
method.
For more information, see
ConsumerMapStyle.setPolylineStyleOptions
.
Route polyline types
You can customize the following route polyline types:
ACTIVE_ROUTE
REMAINING_ROUTE
ACTIVE_ROUTE
and REMAINING_ROUTE
are displayed while following a trip and
represent the vehicle's route.
Route polyline properties
Google Maps provides customizable properties available for each polyline in
PolylineOptions
.
To build PolylineOptions
, use its constructor.
To specify customized properties, use 'Setter' style methods. Since
the method provides default values for each property, you only need
to specify any custom values.
To turn off the polyline, set visible
to false
.
For more details, see
PolylineOptions
in the Android developer documentation.
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 journey sharing enabled, your app can customize the
user's experience using polylines to show the active and remaining
route for your vehicle.
The active route is the path the vehicle is now traveling to reach
the next waypoint in the consumer's active trip.
The remaining route is the path the vehicle still has to travel past
the active route. When the active route waypoint is the last trip waypoint,
the remaining route does not exist.
You can customize and control visibility of active and remaining polylines in
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 you enable it,
the renderer draws segments above the route polyline that represent stretches of
non-normal traffic. It includes an offset depending on the traffic condition.
See the Android Developer documentation for Polyline for more information.
Google maps represent traffic conditions as one of
four speed types.
You can customize the color for each speed type.
To enable traffic-aware polylines, construct a TrafficStyle
object
and then pass it to ConsumerMapStyle
by calling setPolylineTrafficStyle()
.
Example
Java
// TrafficStyle is part of the Consumer SDK.
int orange = Color.rgb(255, 165, 0);
TrafficStyle trafficStyle = TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GREY)
.setTrafficColor(SpeedType.NORMAL, Color.BLUE)
.setTrafficColor(SpeedType.SLOW, orange)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build();
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);
Kotlin
// TrafficStyle is part of the Consumer SDK.
val orange = Color.rgb(255, 165, 0)
val trafficStyle =
TrafficStyle.builder()
.setTrafficVisibility(true)
.setTrafficColor(SpeedType.NO_DATA, Color.GRAY)
.setTrafficColor(SpeedType.NORMAL, Color.BLUE)
.setTrafficColor(SpeedType.SLOW, orange)
.setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
.build()
consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-09-04 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eCustomize the appearance of route polylines (active, remaining) using \u003ccode\u003eConsumerMapStyle.setPolylineStyleOptions\u003c/code\u003e to override default settings.\u003c/p\u003e\n"],["\u003cp\u003eRestore default polyline styles by calling \u003ccode\u003esetPolylineStyleOptions\u003c/code\u003e with \u003ccode\u003enull\u003c/code\u003e for the \u003ccode\u003ePolylineOptions\u003c/code\u003e parameter.\u003c/p\u003e\n"],["\u003cp\u003eControl the visibility and styling of active and remaining route polylines to enhance the user's trip visualization.\u003c/p\u003e\n"],["\u003cp\u003eEnable and customize traffic-aware polylines with \u003ccode\u003eTrafficStyle\u003c/code\u003e to visually represent traffic conditions along the route.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/mobility/journey-sharing/on-demand/android/customize-polylines \"View this page for the Android platform docs.\") [iOS](/maps/documentation/mobility/journey-sharing/on-demand/ios/customize-polylines \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-route-polylines \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nYou customize route polylines using the\n`ConsumerMapStyle.setPolylineStyleOptions` method. If you set custom polyline\noptions, they override the default values provided by the Consumer SDK.\n\n**To restore the default values** , call\n[`setPolylineStyleOptions`](/maps/documentation/mobility/journey-sharing/on-demand/reference/consumer_2/android/reference/com/google/android/libraries/mapsplatform/transportation/consumer/view/ConsumerMapStyle#setPolylineStyleOptions(int,%20com.google.android.gms.maps.model.PolylineOptions))\nwith `null` for the `PolylineOptions` parameter.\n\n**To retrieve the active `PolylineOptions`** , use\n[`getPolylineStyleOptions`](/maps/documentation/mobility/journey-sharing/on-demand/reference/consumer_2/android/reference/com/google/android/libraries/mapsplatform/transportation/consumer/view/ConsumerMapStyle#getPolylineStyleOptions(int)) method.\n\nFor more information, see\n[`ConsumerMapStyle.setPolylineStyleOptions`](/maps/documentation/mobility/journey-sharing/on-demand/reference/consumer_2/android/reference/com/google/android/libraries/mapsplatform/transportation/consumer/view/ConsumerMapStyle#setPolylineStyleOptions(int,%20com.google.android.gms.maps.model.PolylineOptions)).\n\nRoute polyline types\n\nYou can customize the following route polyline types:\n\n- `ACTIVE_ROUTE`\n- `REMAINING_ROUTE`\n\n`ACTIVE_ROUTE` and `REMAINING_ROUTE` are displayed while following a trip and\nrepresent the [vehicle's route](#active-route).\n\nRoute polyline properties\n\nGoogle Maps provides customizable properties available for each polyline in\n`PolylineOptions`.\n\n- **To build `PolylineOptions`**, use its constructor.\n\n- **To specify customized properties**, use 'Setter' style methods. Since\n the method provides default values for each property, you only need\n to specify any custom values.\n\n- **To turn off the polyline** , set `visible` to `false`.\n\nFor more details, see\n[`PolylineOptions`](https://developers.google.com/android/reference/com/google/android/gms/maps/model/PolylineOptions) in the Android developer documentation.\n\nExample \n\nJava \n\n // Initializing polyline style options.\n consumerController\n .getConsumerMapStyle()\n .addOnSuccessListener(\n consumerMapStyle -\u003e {\n consumerMapStyle.setPolylineStyleOptions(\n PolylineType.ACTIVE_ROUTE,\n new PolylineOptions()\n .visible(false));\n });\n\n // Reset polyline options to default values.\n consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);\n\nKotlin \n\n // Initializing polyline options.\n consumerController\n .getConsumerMapStyle()\n .addOnSuccessListener({ consumerMapStyle -\u003e\n consumerMapStyle.setPolylineStyleOptions(\n PolylineType.ACTIVE_ROUTE,\n PolylineOptions().visible(false)\n )\n })\n\n // Reset polyline options to default values.\n consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)\n\nActive and Remaining Route\n\nWith journey sharing enabled, your app can customize the\nuser's experience using polylines to show the active and remaining\nroute for your vehicle.\n\n- The *active route* is the path the vehicle is now traveling to reach\n the next waypoint in the consumer's active trip.\n\n- The *remaining route* is the path the vehicle still has to travel past\n the active route. When the active route waypoint is the last trip waypoint,\n the remaining route does not exist.\n\nYou can customize and control visibility of active and remaining polylines in\nyour app. By default, the active route is visible and the remaining route\nis not visible.\n\nExample \n\nJava \n\n // Initializing polyline options.\n consumerController\n .getConsumerMapStyle()\n .addOnSuccessListener(\n consumerMapStyle -\u003e {\n consumerMapStyle.setPolylineStyleOptions(\n PolylineType.ACTIVE_ROUTE,\n new PolylineOptions()\n .color(Color.BLUE));\n consumerMapStyle.setPolylineStyleOptions(\n PolylineType.REMAINING_ROUTE,\n new PolylineOptions()\n .color(Color.BLACK)\n .width(5)\n .visible(true));\n });\n\n // Reset polyline options to default values.\n consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);\n consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);\n\nKotlin \n\n // Initializing polyline options.\n consumerController\n .getConsumerMapStyle()\n .addOnSuccessListener({ consumerMapStyle -\u003e\n {\n consumerMapStyle.setPolylineStyleOptions(\n PolylineType.ACTIVE_ROUTE,\n PolylineOptions().color(Color.BLUE)\n )\n\n consumerMapStyle.setPolylineStyleOptions(\n PolylineType.REMAINING_ROUTE,\n PolylineOptions().color(Color.BLACK).width(5).visible(true)\n )\n }\n })\n\n // Reset polyline options to default values.\n consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)\n\n consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)\n\nTraffic-aware polylines\n\nThe traffic layer of the polyline is disabled by default. When you enable it,\nthe renderer draws segments above the route polyline that represent stretches of\nnon-normal traffic. It includes an offset depending on the traffic condition.\nSee the Android Developer documentation for [Polyline](https://developers.google.com/android/reference/com/google/android/gms/maps/model/Polyline#public-void-setzindex-float-zindex) for more information.\n\nGoogle maps represent traffic conditions as one of\n[four speed types](/maps/documentation/mobility/journey-sharing/on-demand/reference/consumer_2/android/reference/com/google/android/libraries/mapsplatform/transportation/consumer/model/TrafficData.SpeedReadingInterval.SpeedType).\nYou can customize the color for each speed type.\n\n**To enable traffic-aware polylines** , construct a `TrafficStyle` object\nand then pass it to `ConsumerMapStyle` by calling `setPolylineTrafficStyle()`.\n\nExample \n\nJava \n\n // TrafficStyle is part of the Consumer SDK.\n int orange = Color.rgb(255, 165, 0);\n TrafficStyle trafficStyle = TrafficStyle.builder()\n .setTrafficVisibility(true)\n .setTrafficColor(SpeedType.NO_DATA, Color.GREY)\n .setTrafficColor(SpeedType.NORMAL, Color.BLUE)\n .setTrafficColor(SpeedType.SLOW, orange)\n .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)\n .build();\n\n consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);\n\nKotlin \n\n // TrafficStyle is part of the Consumer SDK.\n val orange = Color.rgb(255, 165, 0)\n val trafficStyle =\n TrafficStyle.builder()\n .setTrafficVisibility(true)\n .setTrafficColor(SpeedType.NO_DATA, Color.GRAY)\n .setTrafficColor(SpeedType.NORMAL, Color.BLUE)\n .setTrafficColor(SpeedType.SLOW, orange)\n .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)\n .build()\n\n consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)"]]