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 />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

This document covers how to customize route polylines for the map you use in
your web-based journey tracking app for consumer users.

With the Consumer SDK, you can control route polyline visibility or style the
route polyline for a journey's route on the map. The SDK creates a
[`google.maps.Polyline`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#Polyline) object for each pair of coordinates in the journey's
active or remaining path. The library then applies these customizations in
two situations:

- before adding the objects to the map
- when the data used for the objects have changed

## Style route polylines

Similar to how you can style markers, you style route polylines using
**customization parameters**. From there, you configure styling using one of the
following approaches:

- **Simplest** : Use `PolylineOptions` to apply to all of the matched `Polyline` objects when they are created or updated.
- **Advanced** : Specify a **customization function** . Customization functions allow for individual styling of the objects based on data sent by Fleet Engine. The function can change the styling of each object based on the current state of the journey; for example, coloring the `Polyline` object a deeper shade, or making it thicker when the vehicle is moving slower. You can even join against from sources outside Fleet Engine and style the `Polyline` object based on that information.

### Customization parameters

When styling route polylines, you use parameters provided in
[`FleetEngineTripLocationProviderOptions`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions). These parameters provide for
different path states in the vehicle's journey, as follows:

- **Already traveled** paths: Use [`takenPolylineCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.takenPolylineCustomization).
- **Actively traveled** path: Use [`activePolylineCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.activePolylineCustomization).
- **Not-yet traveled** path: Use [`remainingPolylineCustomization`](https://developers.google.com/maps/documentation/javascript/reference/journey-sharing-trip-and-order-progress.md.txt#FleetEngineTripLocationProviderOptions.remainingPolylineCustomization).

### Use `PolylineOptions`

The following example shows how to configure the styling for a `Polyline` object
with [`PolylineOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolylineOptions). Follow this pattern to customize the styling of
any `Polyline` object using any of the polyline customizations listed earlier.

<br />

### JavaScript

<br />

```javascript
activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};
```

<br />

### TypeScript

<br />

```typescript
activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};
```

<br />

<br />

### Use customization functions to style route polylines

The following example shows how to configure styling for an active route
polyline. Follow this pattern to customize the styling of any `Polyline` object
using any of the route polyline customization parameters listed earlier.

<br />

### JavaScript

<br />

```javascript
// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

### TypeScript

<br />

```typescript
// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };
```

<br />

<br />

## Control route polyline visibility

By default, all `Polyline` objects are visible. To make a `Polyline` object
invisible, set its [`visible`](https://developers.google.com/maps/documentation/javascript/reference/polygon.md.txt#PolylineOptions) property:

<br />

### JavaScript

<br />

```javascript
remainingPolylineCustomization = {visible: false};
```

<br />

### TypeScript

<br />

```typescript
remainingPolylineCustomization = {visible: false};
```

<br />

<br />