Route display

You can display a route on the map and customize its origin and destination icons. It is also possible to specify the fill color, outline color, and width of the route.

Sample use case: When you add the route, you would like to highlight the starting and the destination points. Also, you would like to plan several routes simultaneously with different origin and destination points and use different icons.

Prerequisites:

The TomtomMap tomtomMap object was created and configured. Route coordinates are prepared.

Origin and destination icons customization

If you need to customize start and destination icons, you should create icons through the Icon class.

The icon can be created in following ways:

with a constructor:

Icon startIcon = new Icon(name, drawable);

with the Icon.Factory.fromDrawable method:
```
Icon startIcon = Icon.Factory.fromDrawable(name, drawable);
```
where name is a String object and drawable is a Drawable object.
with the Icon.Factory.fromResources method:
```
Icon endIcon = Icon.Factory.fromResources(context, iconId);
```
where context is your Context object and iconId is an icon resource identifier.

When icons are created, you can add them to the route using the startIcon and endIcon methods of the RouteBuilder class,

Route customization

You can create a route with custom style properties like fill color, outline color, and width. First, you need to create the RouteStyle object:

_

RouteStyleBuilder.create()
        .withWidth(2.0)
        .withFillColor(Color.BLACK)
        .withOutlineColor(Color.RED)
        .build();

RouteStyleBuilder.create()
        .withWidth(ROUTE_WIDTH)
        .withFillColor(Color.BLACK)
        .withOutlineColor(Color.RED)
        .build()

Next, you need to pass routeBuilder to the addRoute method of tomtomMap:

_

RouteBuilder routeBuilder = new RouteBuilder(route.getCoordinates())
        .endIcon(endIcon)
        .startIcon(startIcon)
        .style(routeStyle);
final Route mapRoute = tomtomMap.addRoute(routeBuilder);

val routeBuilder = RouteBuilder(route.coordinates)
        .style(RouteStyle.DEFAULT_ROUTE_STYLE)
        .startIcon(createIcon(R.drawable.ic_map_route_origin))
        .endIcon(createIcon(R.drawable.ic_map_route_destination))
        .tag(routeIdx.toString())
tomtomMap.addRoute(routeBuilder)

If you don’t call startIcon and endIcon there will be no icons on route. You can specify only a start icon by calling only startIcon or only an end icon by calling only endIcon.

If you don’t call style then the default style will be applied.

You can use different images and styles for different routes.

Route display

Route display

Origin and destination icons customization

Route customization

You are here