Customize route polylines

  • Customize the appearance of route polylines (active, remaining) using ConsumerMapStyle.setPolylineStyleOptions to override default settings.

  • Restore default polyline styles by calling setPolylineStyleOptions with null for the PolylineOptions parameter.

  • Control the visibility and styling of active and remaining route polylines to enhance the user's trip visualization.

  • Enable and customize traffic-aware polylines with TrafficStyle to visually represent traffic conditions along the route.
Select platform: Android iOS JavaScript

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)