Select platform: [Android](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/android/customize-polylines.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/ios/customize-polylines.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/javascript/customize-route-polylines.md.txt "View this page for the JavaScript platform docs.")

<br />

Before you customize route polylines (or markers), you first need to initialize
the UI customization options.

## Initialize UI customization options

The recommended callback used to initially set the UI customization options
is declared in the `GMTCMapViewDelegate`. The `mapViewDidInitialize`
callback is triggered when the `GMTCMapView` object is ready to render the map.
The style coordinator is initialized, but no UI elements are present.

### Swift

```swift
/** ViewController.swift */

class ViewController: UIViewController, GMTCMapViewDelegate {

  // MARK: - GMTCMapViewDelegate

  func mapViewDidInitialize(_ mapview: GMTCMapView) {
    // Set the UI customization options here.
  }
}
```

### Objective-C

```objective-c
/** ViewController.m */

@interface ViewController () <GMTCMapViewDelegate>

#pragma mark GMTCMapViewDelegate

- (void)mapViewDidInitialize:(GMTCMapView *)mapview {
  // Set the UI customization options here.
}
```

## Customize polylines

Polyline customization is set using
`GMTCConsumerMapStyleCoordinator#setPolylineStyleOptions(_:polylineType:)`.

The following example shows how to set polyline style options:

### Polyline types

You can customize the following polyline types:

- `GMTCPolylineType.activeRoute`: The route the vehicle is taking to the rider's next point, whether it is the pickup or the drop-off.
- `GMTCPolylineType.remainingRoute`: The segment of the trip that remains after the vehicle completes the `GMTCPolylineType.activeRoute`.

Both of these types are displayed throughout a shared journey.

### Polyline properties

The properties you can customize for each polyline are a subset of the
properties provided on Google Maps
[`PolylineOptions`](https://developers.google.com/android/reference/com/google/android/gms/maps/model/PolylineOptions.md.txt).
The Consumer SDK
[`GMTCPolylineStyleOptions`](https://developers.google.com/maps/documentation/mobility/journey-sharing/on-demand/reference/ios/interface_g_m_t_c_polyline_style_options)
properties have the following traits:

- Built using an initializer.
- Can be immutable or mutable if you want to provide custom values for any property.
- Have default values.

You can customize the following properties:

- `color`
- `width`
- `isVisible`: To disable a polyline, set `isVisible` to `false`.
- `isTrafficEnabled`: This property is set to `false` by default.

### Example

### Swift

```swift
/** MapViewController.swift */

private func updatePolylineUIOptions() {
  // Get the GMTCConsumerMapStyleCoordinator
  let consumerMapStyleCoordinator = mapView.consumerMapStyleCoordinator

  // The polyline type that you would like to set custom UI options for.
  let customizablePolylineType = GMTCPolylineType.activeRoute

  // Initializing polyline options with default values (immutable version).
  let polylineStyleOptions = GMTCPolylineStyleOptions()
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    polylineStyleOptions, polylineType: customizablePolylineType)

  // Initializing polyline options with custom values (mutable version).
  let mutablePolylineStyleOptions = GMTCMutablePolylineStyleOptions()
  mutablePolylineStyleOptions.isVisible = true
  mutablepolylineStyleOptions.strokeWidth = 8.0
  mutablepolylineStyleOptions.strokeColor = .blue
  mutablepolylineStyleOptions.zIndex = 1000
  mutablepolylineStyleOptions.isGeodesic = true
  mutablePolylineStyleOptions.isTrafficEnabled = true
  mutablePolylineStyleOptions.setTrafficColorFor(.slow, color: .yellow)
  mutablePolylineStyleOptions.setTrafficColorFor(.trafficJam, color: .purple)
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    mutablePolylineStyleOptions, polylineType: customizablePolylineType)

  // Reset polyline options to default values.
  consumerMapStyleCoordinator.setPolylineStyleOptions(
    nil, polylineType: customizablePolylineType)
}
```

### Objective-C

```objective-c
/** MapViewController.m */

- (void)updatePolylineUIOptions {
  // Get the GMTCConsumerMapStyleCoordinator
  GMTCConsumerMapStyleCoordinator *consumerMapStyleCoordinator = [_mapView consumerMapStyleCoordinator];

  // The polyline type that you would like to set custom UI options for.
  GMTCPolylineType customizablePolylineType = GMTCPolylineTypeActiveRoute;

  // Initializing polyline options with default values (immutable version).
  GMTCPolylineStyleOptions *polylineStyleOptions = [[GMTCPolylineStyleOptions alloc] init];
  [consumerMapStyleCoordinator setPolylineStyleOptions:polylineStyleOptions
                               polylineType:customizablePolylineType];

  // Initializing polyline options with custom values (mutable version).
  GMTCMutablePolylineStyleOptions *mutablePolylineStyleOptions = [[GMTCMutablePolylineStyleOptions alloc] init];
  mutablePolylineStyleOptions.isVisible = YES;
  mutablepolylineStyleOptions.strokeWidth = 8.0;
  mutablepolylineStyleOptions.strokeColor = [UIColor blueColor];
  mutablepolylineStyleOptions.zIndex = 1000;
  mutablepolylineStyleOptions.isGeodesic = YES;
  mutablePolylineStyleOptions.isTrafficEnabled = YES;
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeSlow color:[UIColor yellowColor]];
  [mutablePolylineStyleOptions setTrafficColorForSpeed:GMTSSpeedTypeTrafficJam color:[UIColor purpleColor]];
  [consumerMapStyleCoordinator setPolylineStyleOptions:mutablePolylineStyleOptions
                                          polylineType:customizablePolylineType];

  // Reset polyline options to default values.
  [consumerMapStyleCoordinator setPolylineStyleOptions:nil
                                          polylineType:customizablePolylineType];
}
```

### Traffic-aware polylines

The traffic layer of the polyline is disabled by default. When you enable it
by using `polylineStyleOptions.isTrafficEnabled = true`, segments representing
stretches of non-normal traffic are drawn as the route.

Traffic conditions are represented as one of four speeds:

- `GMTSSpeedType.noData`
- `GMTSSpeedType.normal`
- `GMTSSpeedType.slow`
- `GMTSSpeedType.trafficJam`

You can customize the color representing each of those speed classifications
by using `setTrafficColorFor(_:color:)`.