Sorry, you need to enable JavaScript to visit this website.

Route display

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:

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 Icon class.

The icon can be created in following ways:

  • with constructor:

    Icon startIcon = new Icon(name, drawable);
  • with Icon.Factory.fromDrawable method:

    Icon startIcon = Icon.Factory.fromDrawable(name, drawable);

    where name is String object and drawable is Drawable object.

  • with 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 route using startIcon and
endIcon methods of RouteBuilder class,

Route customization

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

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

 

Next, you need to pass routeBuilder to addRoute method of tomtomMap, e.g.:

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

 

If you don’t call startIcon and endIcon there will be no icons on route. You can specify
only start icon by calling only startIcon or only 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.