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:

TTMapView: The *mapView object was created and configured. Route coordinates are prepared.

Origin and destination icons customization

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

The icon can be created in the following ways:

Basic

Route customization

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

Next, you need to pass the mapRoute object to the addRoute`method of the `mapView.routeManager object, e.g.,:

If you provide nil for imageStart or imageEnd there will be no icons on the route. If you don’t call a style, then the default style will be applied.

Custom

Route segmented customization

You can create a route with segmented sections where each segment contains custom-style properties like fill color, outline color, and width.

1// Section 1
2let routeStyle1 = TTMapRouteStyleBuilder()
3    .withWidth(1.0)
4    .withFill(.black)
5    .withOutlineColor(.black)
6    .build()
7
8let startPoint1 = plannedRoute.sections[0].startPointIndexValue
9let endPoint1 = plannedRoute.sections[0].endPointIndexValue
10
11var coordinatesSection1 = arrayOfCoordiantes(plannedRoute: plannedRoute, start: startPoint1, end: endPoint1)
12let mapRoute = TTMapRoute(coordinates: &coordinatesSection1, count: UInt(coordinatesSection1.count), with: routeStyle1,
13                          imageStart: iconStart, imageEnd: iconEnd)
14
15// Section 2
16let routeStyle2 = TTMapRouteStyleBuilder()
17    .withWidth(1.0)
18    .withFill(.blue)
19    .withOutlineColor(.blue)
20    .build()
21
22let startPoint2 = plannedRoute.sections[1].startPointIndexValue
23let endPoint2 = plannedRoute.sections[1].endPointIndexValue
24var coordinatesSection2 = arrayOfCoordiantes(plannedRoute: plannedRoute, start: startPoint2, end: endPoint2)
25mapRoute.addCoordinates(&coordinatesSection2, count: UInt(coordinatesSection2.count), with: routeStyle2)

1// Section 1
2TTMapRouteStyle *routeStyle1 = [[[[[TTMapRouteStyleBuilder new] withWidth:1.0] withFillColor:UIColor.blackColor] withOutlineColor:UIColor.blackColor] build];
3
4NSInteger startPoint1 = plannedRoute.sections[0].startPointIndexValue;
5NSInteger endPoint1 = plannedRoute.sections[0].endPointIndexValue;
6
7CLLocationCoordinate2D coordinateArray[endPoint1 - startPoint1];
8[self arrayOfCoordinates:plannedRoute withStart:startPoint1 withEnd:endPoint1 withArray:coordinateArray];
9
10TTMapRoute *mapRoute = [TTMapRoute routeWithCoordinates:coordinateArray count:endPoint1 withRouteStyle:routeStyle1 imageStart:self.iconStart imageEnd:self.iconEnd];
11
12// Section 2
13TTMapRouteStyle *routeStyle2 = [[[[[TTMapRouteStyleBuilder new] withWidth:1.0] withFillColor:UIColor.blueColor] withOutlineColor:UIColor.blueColor] build];
14
15NSInteger startPoint2 = plannedRoute.sections[1].startPointIndexValue;
16NSInteger endPoint2 = plannedRoute.sections[1].endPointIndexValue;
17
18CLLocationCoordinate2D coordinateArray2[endPoint2 - startPoint2];
19[self arrayOfCoordinates:plannedRoute withStart:startPoint2 withEnd:endPoint2 withArray:coordinateArray2];
20
21[mapRoute addCoordinates:coordinateArray2 count:endPoint2 - startPoint2 withRouteStyle:routeStyle2];

Segmented