> ## Documentation Index
> Fetch the complete documentation index at: https://docs.here.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add UI building blocks

This section presents various UI elements and related code snippets that are already available as part of the HERE SDK offering. From maneuver instructions and maneuver icon assets to visual route representation, discover how to integrate these elements into your application interface. More reusable UI building blocks are planned for the future.

## Get maneuver instructions

Each `Section` of a `Route` object contains maneuver instructions a user may need to follow to reach the destination. For each turn, a `Maneuver` object contains an action and the location where the maneuver must be taken. The action may indicate actions like "depart" or directions such as "turn left".

```java Java
// Log maneuver instructions per route section.
List<Section> sections = route.getSections();
for (Section section : sections) {
    logManeuverInstructions(section);
}
```

```kotlin Kotlin
// Log maneuver instructions per route section.
val sections: List<Section> = route.sections
for (section in sections) {
    logManeuverInstructions(section)
}
```

And here is the code to access the maneuver instructions per section:

```java Java
private void logManeuverInstructions(Section section) {
    Log.d(TAG, "Log maneuver instructions per route section:");
    List<Maneuver> maneuverInstructions = section.getManeuvers();
    for (Maneuver maneuverInstruction : maneuverInstructions) {
        ManeuverAction maneuverAction = maneuverInstruction.getAction();
        GeoCoordinates maneuverLocation = maneuverInstruction.getCoordinates();
        String maneuverInfo = maneuverInstruction.getText()
                + ", Action: " + maneuverAction.name()
                + ", Location: " + maneuverLocation.toString();
        Log.d(TAG, maneuverInfo);
    }
}
```

```kotlin Kotlin
private fun logManeuverInstructions(section: Section) {
    Log.d(TAG, "Log maneuver instructions per route section:")
    val maneuverInstructions: List<Maneuver> = section.maneuvers
    for (maneuverInstruction in maneuverInstructions) {
        val maneuverAction: ManeuverAction = maneuverInstruction.action
        val maneuverLocation: GeoCoordinates = maneuverInstruction.coordinates
        val maneuverInfo: String = (maneuverInstruction.text
                + ", Action: " + maneuverAction.name
                + ", Location: " + maneuverLocation.toString())
        Log.d(TAG, maneuverInfo)
    }
}
```

This may be useful to easily build maneuver instructions lists describing the whole route in written form. For example, the `ManeuverAction` enum can be used to build your own unique routing experience.

![Screenshot: An example screen showing a route preview with maneuver instructions.](https://files.readme.io/3408d689164c18fa299a00194a9ad6fc7d04da14537634b3867d777a228f9dc2-android-route_preview.jpg)

> #### Note (HERE SDK for Android Navigate)
>
> Note that the `Maneuver` instruction text (`maneuverInstruction.getText()`) is empty during navigation when it is taken from `Navigator` or `VisualNavigator`. It only contains localized instructions when taken from a `Route` instance. The `ManeuverAction` enum is supposed to be used to show a visual indicator during navigation, and textual instructions fit more into a list to **preview maneuvers** before starting a trip.
>
> In opposition, `maneuverInstruction.getRoadTexts()`, `maneuverInstruction.getNextRoadTexts()` and `maneuverInstruction.getExitSignTexts()` are meant to be shown as part of **turn-by-turn maneuvers** during navigation, so they are only non-empty when the `Maneuver` is taken from `Navigator` or `VisualNavigator`. If taken from a `Route` instance, these attributes are always empty.

> #### Note (HERE SDK for Android Explore)
>
> The attributes `maneuverInstruction.getRoadTexts()`, `maneuverInstruction.getNextRoadTexts()` and `maneuverInstruction.getExitSignTexts()` are only available for users of licenses such as Navigate as they are meant to be shown as part of **turn-by-turn maneuvers** during navigation. If taken from a `Route` instance, these attributes are always empty.

In the API Reference you can find an overview of the available maneuver actions.

The below table shows all `ManeuverAction` items with a preview description and an asset example. Note that the HERE SDK itself does not ship with maneuver icons. The assets are available as SVGs or solid PNGs in different densities as part of the open-source [HERE Icon Library](https://github.com/heremaps/here-icons/tree/master/icons/guidance-icons/manoeuvers).

The available maneuver actions are sorted in the order as they appear in the API Reference:

<HTMLBlock>
  {`
  <table>
    <thead>
      <tr>
        <th>Maneuver Action</th>
        <th>Description Example</th>
        <th>Icon Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>ARRIVE</td>
        <td>Arrival maneuver, such as "Arrive at". Example description for in-between waypoint(s): "Arrive at &lt;road name | waypoint&gt;". For the destination of a route: "Arrive at &lt;road name | destination name | destination&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/arrive_solid_24px.svg">
        <img width="100" src="https://files.readme.io/bdadf5e17d266d0073223f4bc58f0da76a24e62cfad6e1ff4c674546e9d827aa-android-arrive_solid_24px.png" alt="ARRIVE"/></a>
        </td>
      </tr>
      <tr>
        <td>CONTINUE_ON</td>
        <td>Continue maneuver, such as "Continue on &lt;road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/continue-on_solid_24px.svg">
        <img width="100" src="https://files.readme.io/0136b96c9a0ea0c867a9655ed69e762d7b3b024ace1f457cab3711da9baa53d3-android-continue-on_solid_24px.png" alt="CONTINUE_ON"/></a>
        </td>
      </tr>
      <tr>
        <td>DEPART</td>
        <td>Departure maneuver, such as "Start at &lt;road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/depart_solid_24px.svg">
        <img width="100" src="https://files.readme.io/6578477e0f3d7cb0d61918a02651f8be91a30478a345e673848284bf9de93346-android-depart_solid_24px.png" alt="DEPART"/></a>
        </td>
      </tr>
      <tr>
        <td>ENTER_HIGHWAY_FROM_LEFT</td>
        <td>Merge onto a highway from the left side, which effectively means the driver has to move right to enter the highway. Such a maneuver occurs only in countries that drive on the left side of the road (left-hand traffic)</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/enter-highway-right_solid_24px.svg">
        <img width="100" src="https://files.readme.io/7a7df6d05c7195605230da0d7b1c3e8b2be174f9e745aa4eb4d03a7b589afebc-android-enter-highway-left_solid_24px.png" alt="ENTER_HIGHWAY_FROM_LEFT"/></a>
        </td>
      </tr>
      <tr>
        <td>ENTER_HIGHWAY_FROM_RIGHT</td>
        <td>Merge onto a highway from the right side, which effectively means the driver has to move left to enter the highway. Such a maneuver occurs only in countries that drive on the right side of the road (right-hand traffic).</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/enter-highway-left_solid_24px.svg">
        <img width="100" src="https://files.readme.io/5518d229a087c39d099953685ad24ae074d8ea3fcc3992f480174a54466e8163-android-enter-highway-right_solid_24px.png" alt="ENTER_HIGHWAY_FROM_RIGHT"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_EXIT</td>
        <td>Left exit maneuver, such as "Take the left exit to &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left_exit_solid_24px.svg">
        <img width="100" src="https://files.readme.io/9934a878204203e67820be0c4b9a9b52ae8be2d0e7c8082ed2ac45b63d6aa84e-android-left_exit_solid_24px.png" alt="LEFT_EXIT"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_FORK</td>
        <td>Left fork maneuver, such as "Take the left fork onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-fork_solid_24px.svg">
        <img width="100" src="https://files.readme.io/3f430caaadcb6b245853e59874ee078c315cc23b6cc282a18f6acf09afe23059-android-left-fork_solid_24px.png" alt="LEFT_FORK"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_RAMP</td>
        <td>Left ramp maneuver, such as "Take the left ramp onto".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-ramp_solid_24px.svg">
        <img width="100" src="https://files.readme.io/81c9443d33f71c7a6dee2f2499b685f1025f701f442df000675c1a7318fb670b-android-left-ramp_solid_24px.png" alt="LEFT_RAMP"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_ENTER</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Enter the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-enter_solid_24px.svg">
        <img width="100" src="https://files.readme.io/0f8cc59074b528228de90c73e6b2062d397d11b446f878303c0f15f7cb87c56b-android-left-roundabout-enter_solid_24px.png"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT1</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the first exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit1_solid_24px.svg">
        <img width="100" src="https://files.readme.io/3df10d1e356162936ebb7ab6c65d56269c006395ac02afa89274edeef7b77c01-android-left-roundabout-exit1_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT1 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT10</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the tenth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/left-roundabout-exit10.svg">
        <img width="100" src="https://files.readme.io/43b35b8c2973b63ae7e8049627c025eed34bd9cf3267fe1de5b11aa1acb26062-android-maneuver_icon_40.png" alt="LEFT_ROUNDABOUT_EXIT10 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT11</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the eleventh exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/left-roundabout-exit11.svg">
        <img width="100" src="https://files.readme.io/d83bbbc580d970c0addc6ae04700976c6d618d9a560c4798a612101f1375a0be-android-maneuver_icon_41.png" alt="LEFT_ROUNDABOUT_EXIT11 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT12</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the twelfth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/left-roundabout-exit12.svg">
        <img width="100" src="https://files.readme.io/335ec787f1b3695a20df2a462b564542b0ac2616b84099b573876714db71eb94-android-maneuver_icon_42.png" alt="LEFT_ROUNDABOUT_EXIT12 icon"/></a>
       </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT2</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the second exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit2_solid_24px.svg">
        <img width="100" src="https://files.readme.io/884db2c715a42666e362431f39c30f52d94fff32ac7bcd52eb8478307b5ce35f-android-left-roundabout-exit2_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT2 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT3</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the third exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit3_solid_24px.svg">
        <img width="100" src="https://files.readme.io/7fa52c4a4c053907d6d5beaae23bf6f6b884b5c7d574017ea9fc99916613fa24-android-left-roundabout-exit3_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT3 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT4</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the fourth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit4_solid_24px.svg">
        <img width="100" src="https://files.readme.io/259a63c773b718c4eb3ac0a35e5b06c550cde52eb50f92a23e0ac9c874e1aece-android-left-roundabout-exit4_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT4 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT5</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the fifth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit5_solid_24px.svg">
        <img width="100" src="https://files.readme.io/236622938ba2e389c801ccbbb96ad407a1766abeae8bed1fefc0e865baa69032-android-left-roundabout-exit5_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT5 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT6</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the sixth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit6_solid_24px.svg">
        <img width="100" src="https://files.readme.io/7cd9ac4f3b876dd0f42fee2d30a3dd49c2fa11ae14838e743d3134ee18858f09-android-left-roundabout-exit6_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT6 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT7</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the seventh exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-roundabout-exit7_solid_24px.svg">
        <img width="100" src="https://files.readme.io/c0c716e7d616356af9117d39e852413d8bd7d6cbb9f158164f25bb26c1cab39d-android-left-roundabout-exit7_solid_24px.png" alt="LEFT_ROUNDABOUT_EXIT7 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT8</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the eighth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/left-roundabout-exit8.svg">
        <img width="100" src="https://files.readme.io/88403db1df8b142d60bb4d83fd4925428528bca4ab221a7b859ce4bb5201e5aa-android-maneuver_icon_38.png" alt="LEFT_ROUNDABOUT_EXIT8 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_EXIT9</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Take the ninth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/left-roundabout-exit9.svg">
        <img width="100" src="https://files.readme.io/621956e7c7d26625d45c99a72e264bb389be66cb311f223735fa010a90504485-android-maneuver_icon_39.png" alt="LEFT_ROUNDABOUT_EXIT9 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_ROUNDABOUT_PASS</td>
        <td>Roundabout maneuver (left-hand traffic), such as "Pass the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/left-roundabout-pass.svg">
        <img width="100" src="https://files.readme.io/ed51b88900d44a966ad1cefabc3a39731848b34bcb4e8d19b3d080fa11d7f324-android-left-roundabout-pass.png" alt="LEFT_ROUNDABOUT_PASS icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_TURN</td>
        <td>Left turn maneuver, such as "Turn left on &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-turn_solid_24px.svg">
        <img width="100" src="https://files.readme.io/9d8c3f1955b573a54f17ebab3f09fc0a75871375ba3e03f0dbdd68d50aae21a7-android-left-turn_solid_24px.png" alt="LEFT_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>LEFT_U_TURN</td>
        <td>Left-hand U-turn maneuver, such as "Make a U-turn at &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/left-u-turn_solid_24px.svg">
        <img width="100" src="https://files.readme.io/4381878656442ed3047c38e7b86e180ef3b2219e32716a03e8e7a5a5d7d8e438-android-left-u-turn_solid_24px.png" alt="LEFT_U_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>MIDDLE_FORK</td>
        <td>Middle fork maneuver, such as "Take the middle fork onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/middle-fork_solid_24px.svg">
        <img width="100" src="https://files.readme.io/5108a4d2d6db64192cb36d9bbeb43562968fafa2d1082d1195a8e8465937e6fb-android-middle-fork_solid_24px.png" alt="Middle fork icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_EXIT</td>
        <td>Right exit maneuver, such as "Take the right exit to &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-exit_solid_24px.svg">
        <img width="100" src="https://files.readme.io/54cf2f01d6e742413d6e375e8fcace6c5c64770eae28184ec2accd2fd7208e8b-android-right-exit_solid_24px.png" alt="Right exit icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_FORK</td>
        <td>Right fork maneuver, such as "Take the right fork onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-fork_solid_24px.svg">
        <img width="100" src="https://files.readme.io/e089092f161bdfcd89b7ce09fd4b6dea183cc1b359dcdf23efe5b8fe4d5e51d6-android-right-fork_solid_24px.png" alt="Right fork icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_RAMP</td>
        <td>Right ramp maneuver, such as "Take the right ramp onto".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-ramp_solid_24px.svg">
        <img width="100" src="https://files.readme.io/de5b89064ada9c158dff3c0e840d41c73a37f1cf4b7a66c32e91f2e166005938-android-right-ramp_solid_24px.png" alt="Right ramp icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_ENTER</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Enter the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-enter_solid_24px.svg">
        <img width="100" src="https://files.readme.io/cbdb0b7e86afe13b81e9caed0176a04add03d5c7ae4ccb1d418074af39a73ac7-android-right-roundabout-enter_solid_24px.png" alt="Right roundabout enter icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT1</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the first exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit1_solid_24px.svg">
        <img width="100" src="https://files.readme.io/a655eda36854f8ac4e2436117de0fe70a2bb8c442835b9186d160f60df9204bf-android-right-roundabout-exit1_solid_24px.png" alt="Right roundabout exit 1 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT10</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the tenth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/right-roundabout-exit10.svg">
        <img width="100" src="https://files.readme.io/2c43daaa3ba1ee8d837ee4263c34e56e088c7c6cdfa52a56073cbd0e0128cb8b-android-maneuver_icon_28.png" alt="Right roundabout exit 10 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT11</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the eleventh exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/right-roundabout-exit11.svg">
        <img width="100" src="https://files.readme.io/28cbd96176700f96b41af5cb447ef5c4489f1690641e14c6651131c610b5af40-android-maneuver_icon_29.png" alt="Right roundabout exit 11 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT12</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the twelfth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/right-roundabout-exit12.svg">
        <img width="100" src="https://files.readme.io/9b3ccd5ac069c3b17fca5346d2d2fdffedb7e565ef7284334673ec6ea35baca7-android-maneuver_icon_30.png" alt="RIGHT_ROUNDABOUT_EXIT12 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT2</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the second exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit2_solid_24px.svg">
        <img width="100" src="https://files.readme.io/47edf8fd5f433bfe7e4c8691e2fbdf947f4ff47984b7b1b6c90377b5cd1d6b0b-android-right-roundabout-exit2_solid_24px.png" alt="RIGHT_ROUNDABOUT_EXIT2 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT3</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the third exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit3_solid_24px.svg">
        <img width="100" src="https://files.readme.io/3b3bc0f1f653ef9ba7055780dd58dda6d587ac12c253a160bd31ede943602240-android-right-roundabout-exit3_solid_24px.png" alt="RIGHT_ROUNDABOUT_EXIT3 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT4</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the fourth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit4_solid_24px.svg">
        <img width="100" src="https://files.readme.io/a6afa8118cb468b11ddd62f2ddb7965fe25ebffe943b55deaed65add9125a5f3-android-right-roundabout-exit4_solid_24px.png" alt="RIGHT_ROUNDABOUT_EXIT4 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT5</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the fifth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit5_solid_24px.svg">
        <img width="100" src="https://files.readme.io/2620e949a958349d0a82d4ecb7935a9ad7774ab3132caa53376903fc6a619361-android-right-roundabout-exit5_solid_24px.png" alt="RIGHT_ROUNDABOUT_EXIT5 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT6</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the sixth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit6_solid_24px.svg">
        <img width="100" src="https://files.readme.io/651f5140e6dd50c8cbf5ec035790a34fcae00a48519a0d44ca42f06647a6e928-android-right-roundabout-exit6_solid_24px.png" alt="RIGHT_ROUNDABOUT_EXIT6 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT7</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the seventh exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-roundabout-exit7_solid_24px.svg">
        <img width="100" src="https://files.readme.io/d062ff25df6af9e0a15ace85455c925d033418d1d6866ce516ff06a603a06794-android-right-roundabout-exit7_solid_24px.png" alt="RIGHT_ROUNDABOUT_EXIT7 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT8</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the eighth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/right-roundabout-exit8.svg">
        <img width="100" src="https://files.readme.io/cd2af66c1a10663849e5aacdb34d0d533be18a9bfb5dd4cb75b35157d1d026f1-android-maneuver_icon_26.png" alt="RIGHT_ROUNDABOUT_EXIT8 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_EXIT9</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Take the ninth exit of the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/right-roundabout-exit9.svg">
        <img width="100" src="https://files.readme.io/4792170a5ee03ac834717c80aa77d5c2bbcfcec236cfcf1e809dcf3cb2539f48-android-maneuver_icon_27.png" alt="RIGHT_ROUNDABOUT_EXIT9 icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_ROUNDABOUT_PASS</td>
        <td>Roundabout maneuver (right-hand traffic), such as "Pass the roundabout".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers-sdk/right-roundabout-pass.svg">
        <img width="100" src="https://files.readme.io/aec6d5d5ecb1827ee1d11b62daa3d855f7f09304fee4c07ade6c5c2f44cefe93-android-right-roundabout-pass.png" alt="RIGHT_ROUNDABOUT_PASS icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_TURN</td>
        <td>Right turn maneuver, such as "Turn right on &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-turn_solid_24px.svg">
        <img width="100" src="https://files.readme.io/a66485fa65da6f144368e16b7b39f1f073b2f4a30c825dfeade748de7ea1e77c-android-right-turn_solid_24px.png" alt="RIGHT_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>RIGHT_U_TURN</td>
        <td>Right u-turn maneuver, such as "Make a right U-turn at &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/right-u-turn_solid_24px.svg">
        <img width="100" src="https://files.readme.io/a7d5a88b092951838bb4bbc9cd45204b03151c312a4902168de572d163f5b025-android-right-u-turn_solid_24px.png" alt="RIGHT_U_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>SHARP_LEFT_TURN</td>
        <td>Sharp left turn maneuver, such as "Make a hard left turn onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/sharp-left-turn_solid_24px.svg">
        <img width="100" src="https://files.readme.io/305d484db0581b54426c435518e0f44f31494dbb34504cf8761ff7cd75e3b08a-android-sharp-left-turn_solid_24px.png" alt="SHARP_LEFT_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>SHARP_RIGHT_TURN</td>
        <td>Sharp right turn maneuver, such as "Make a hard right turn onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/sharp-right-turn_solid_24px.svg">
        <img width="100" src="https://files.readme.io/da7499d0884f812c17bd1e45a3d88a3e73a1ed059bfd81c08eff560d2a209a30-android-sharp-right-turn_solid_24px.png" alt="SHARP_RIGHT_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>SLIGHT_LEFT_TURN</td>
        <td>Slight left turn maneuver, such as "Bear left onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/slide-left-turn-solid_24px.svg">
        <img width="100" src="https://files.readme.io/e4bc6450213f3611aaa671ad7618fdad5eadb8d67d4d68a76da6bbc4353b1464-android-slide-left-turn-solid_24px.png" alt="SLIGHT_LEFT_TURN icon"/></a>
        </td>
      </tr>
      <tr>
        <td>SLIGHT_RIGHT_TURN</td>
        <td>Slight right turn maneuver, such as "Bear right onto &lt;next road name&gt;".</td>
        <td><a href="https://github.com/heremaps/here-icons/blob/master/icons/guidance-icons/manoeuvers/SVG/slight-right-turn-solid_24px.svg">
        <img width="100" src="https://files.readme.io/118c5ce922793de1ade8735b918d7d27401330aa46db592a99074248c2430cc0-android-slight-right-turn-solid_24px.png" alt="SLIGHT_RIGHT_TURN icon"/></a>
        </td>
      </tr>
    </tbody>
  </table>
  `}
</HTMLBlock>

Note that for now, the HERE assets for `LEFT_ROUNDABOUT_PASS` and `RIGHT_ROUNDABOUT_PASS` are only available as SVGs - and some maneuver assets are only available in the sub-folder "wego-fallback-roundabout".

## Get road shield icons

With `iconProvider.createRoadShieldIcon(...)` you can asynchronously create a `Bitmap` that depicts a road number such as "A7" or "US-101" - as it already appears on the map view.

The creation of road shield icons happens offline and does not require an internet connection. The data you need to create the icons is taken solely from the `Route` itself, but can be filled out also manually.

![Examples of road shield icons.](https://files.readme.io/ea08625bf38a21abb9ab0fdd1fcf49409c5c10fdbb10a667f1996970e37c7f29-android-road-shield-icons.png)

You can find a usage example as part of the "[Rerouting](https://github.com/heremaps/here-sdk-examples/tree/master/examples/latest/navigate/android/Java/Rerouting)" example app on [GitHub](https://github.com/heremaps/here-sdk-examples). Note that this app requires the HERE SDK (Navigate), but the code for the `IconProvider` can be also used by other editions, for example, to show road shield icons as part of a route preview. You can get more information on the `IconProvider` in the [Get road shield icons](android-navigation-optimization#get-road-shield-icons) chapter.

## Show the route on the map

Below is a code snippet that shows how to show a route on the map by using a `MapPolyline` that is drawn between each coordinate of the route including the starting point and the destination:

```java Java
GeoPolyline routeGeoPolyline = route.getGeometry();
float widthInPixels = 20;
Color polylineColor = Color.valueOf(0, 0.56f, 0.54f, 0.63f);
MapPolyline routeMapPolyline = null;

try {
    routeMapPolyline = new MapPolyline(routeGeoPolyline, new MapPolyline.SolidRepresentation(
            new MapMeasureDependentRenderSize(RenderSize.Unit.PIXELS, widthInPixels),
            polylineColor,
            LineCap.ROUND));
} catch (MapPolyline.Representation.InstantiationException e) {
    Log.e("MapPolyline Representation Exception:", e.error.name());
} catch (MapMeasureDependentRenderSize.InstantiationException e) {
    Log.e("MapMeasureDependentRenderSize Exception:", e.error.name());
}

mapView.getMapScene().addMapPolyline(routeMapPolyline);
```

```kotlin Kotlin
val routeGeoPolyline: GeoPolyline = route.geometry
val widthInPixels = 20f
val polylineColor = Color(0f, 0.56.toFloat(), 0.54.toFloat(), 0.63.toFloat())
var routeMapPolyline: MapPolyline? = null

try {
    routeMapPolyline = MapPolyline(
        routeGeoPolyline, MapPolyline.SolidRepresentation(
            MapMeasureDependentRenderSize(RenderSize.Unit.PIXELS, widthInPixels.toDouble()),
            polylineColor,
            LineCap.ROUND
        )
    )
} catch (e: MapPolyline.Representation.InstantiationException) {
    Log.e("MapPolyline Representation Exception:", e.error.name)
} catch (e: MapMeasureDependentRenderSize.InstantiationException) {
    Log.e("MapMeasureDependentRenderSize Exception:", e.error.name)
}

mapView.mapScene.addMapPolyline(routeMapPolyline)
```

The first screenshot below shows a route without additional waypoints - and therefore only one route section. Starting point and destination are indicated by green-circled map marker objects. Note that the code for drawing the circled objects is not shown here, but can be seen from the example's source code, if you are interested.

![Screenshot: Showing a route on the map.](https://files.readme.io/899636a42d123918bcd34555e89299ae5dbaf6b0f96096cb26eb86526ca13384-android-route.jpg)

The second screenshot shows the same route as above, but with two additional `STOPOVER`-waypoints, indicated by red-circled map marker objects. The route therefore, contains three route sections.

![Screenshot: Showing a route with two additional waypoints.](https://files.readme.io/bc9e8089fe224ffc2b12585d17c8dd7aac1808dcaecef369abe06576ca966a32-android-route_with_waypoints.jpg)

Additional `stopover`-waypoints split a route into separate sections and force the route to pass these points and to generate a maneuver instruction for each point.

Note that internally, rendering of the `MapPolyline` is optimized for very long routes. For example, on a higher zoom level, not every coordinate needs to be rendered, while for lower zoom levels, the entire route is not visible. The algorithm for this is not exposed, but the basic principle can be seen in the [flexible-polyline](https://github.com/heremaps/flexible-polyline) open-source project from HERE.

## Zoom to the route

For some use cases, it may be useful to zoom to the calculated route. The camera class provides a convenient method to adjust the viewport so that a route fits in:

```java
GeoBox routeGeoBox = route.getBoundingBox();
// Set null values to keep the default map orientation.
camera.lookAt(routeGeoBox, new GeoOrientationUpdate(null, null));
```

Here we use the enclosing bounding box of the route object. This can be used to instantly update the camera: zoom level and target point of the camera will be changed, so that the given bounding rectangle fits exactly into the viewport. Additionally, we can specify an orientation to specify more camera parameters - here we keep the default values. Note that calling `lookAt()` will instantly change the view.

For most use cases, a better user experience is to zoom to the route with an animation. Below you can see an example that zooms to a `GeoBox` plus an additional padding of 50 pixels:

```java
private void animateToRoute(Route route) {
    // The animation should result in an untilted and unrotated map.
    double bearing = 0;
    double tilt = 0;
    // We want to show the route fitting in the map view with an additional padding of 50 pixels
    Point2D origin = new Point2D(50, 50);
    Size2D sizeInPixels = new Size2D(mapView.getWidth() - 100, mapView.getHeight() - 100);
    Rectangle2D mapViewport = new Rectangle2D(origin, sizeInPixels);

    // Animate to the route within a duration of 3 seconds.
    MapCameraUpdate update = MapCameraUpdateFactory.lookAt(
            route.getBoundingBox(),
            new GeoOrientationUpdate(bearing, tilt),
            mapViewport);
    MapCameraAnimation animation =
            MapCameraAnimationFactory.createAnimation(update, Duration.ofMillis(3000), new Easing(EasingFunction.IN_CUBIC));
    mapView.getCamera().startAnimation(animation);
}
```

The `CameraKeyframeTracks` example app shows how this can look like.

## Show traffic with routes

For information on how to visualize traffic conditions on routes, including rendering polylines adjacent to traffic flow and custom traffic overlays, see [Visualize traffic on routes](android-traffic-render).