User Interfaces and Customization

Components of Navigation View

To gain an understanding of the elements that can be modified in the navigation view, let's break it down into smaller parts:

documentation image
  • Base Maps(StyleUrl)

  • RoutLine

  • Instruction Banner

  • Bottom Summary

  • Steps list

  • Location Component

  • Destination Marker

Customize the navigation view

A screenshot of the navigation screen's components.

documentation image

Attribute definition summary:

No.Attribute NameType

1

ArrivalTimeLabel.appearance().font

font

2

ArrivalTimeLabel.appearance().normalTextColor

color

3

BottomBannerContentView.appearance().backgroundColor

color

4

BottomBannerView.appearance().backgroundColor

color

5

Button.appearance().textColor

color

6

CancelButton.appearance().backgroundColor

color

7

CancelButton.appearance().textFont

color

8

CancelButton.appearance().textColor

color

9

OverviewButton.appearance().borderColor

color

10

OverviewButton.appearance().tintColor

color

11

DistanceLabel.appearance().unitFont

font

12

DistanceLabel.appearance().valueFont

color

13

DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor

color

14

DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor

color

15

ExitView.appearance().backgroundColor

color

16

ExitView.appearance().borderWidth

double

17

ExitView.appearance().cornerRadius

double

18

ExitView.appearance().foregroundColor

color

19

ExitView.appearance(for: UITraitCollection(userInterfaceIdiom: .carPlay)).foregroundColor

color

20

FloatingButton.appearance().backgroundColor

color

21

FloatingButton.appearance().tintColor

color

22

GenericRouteShield.appearance().backgroundColor

color

23

GenericRouteShield.appearance().borderWidth

double

24

GenericRouteShield.appearance().cornerRadius

double

25

GenericRouteShield.appearance().foregroundColor

color

26

GenericRouteShield.appearance(for: UITraitCollection(userInterfaceIdiom: .carPlay)).foregroundColor

color

27

InstructionsBannerView.appearance().backgroundColor

color

28

LaneView.appearance().primaryColor

color

29

LaneView.appearance().secondaryColor

color

30

LanesView.appearance().backgroundColor

color

31

LineView.appearance().lineColor

color

32

ManeuverView.appearance().backgroundColor

color

33

ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).primaryColor

color

34

ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).secondaryColor

color

35

ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).primaryColor

color

36

ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).secondaryColor

color

37

ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).primaryColor

color

38

ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).secondaryColor

color

39

NavigationMapView.appearance().maneuverArrowColor

color

40

NavigationMapView.appearance().maneuverArrowStrokeColor

color

41

NavigationMapView.appearance().routeAlternateColor

color

42

NavigationMapView.appearance().routeCasingColor  

43

NavigationMapView.appearance().trafficHeavyColor

44

NavigationMapView.appearance().trafficLowColor  

45

NavigationMapView.appearance().trafficModerateColor

color

46

NavigationMapView.appearance().trafficSevereColor

color

47

NavigationMapView.appearance().trafficUnknownColor  

color

48

NavigationView.appearance().backgroundColor

color

49

NextBannerView.appearance().backgroundColor

color

50

NextInstructionLabel.appearance().font

color

51

NextInstructionLabel.appearance().normalTextColor

color

52

PrimaryLabel.appearance().normalFont

color

53

PrimaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor

color

54

PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor

color

55

PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalFont

color

56

ProgressBar.appearance().barColor

color

57

ResumeButton.appearance().backgroundColor
ResumeButton.appearance().tintColor

color

58

SecondaryLabel.appearance().normalFont

color

59

SecondaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor

color

60

SecondaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor

color

61

StatusView.appearance().backgroundColor

color

62

StepInstructionsView.appearance().backgroundColor

color

63

StepListIndicatorView.appearance().gradientColors

color

64

StepTableViewCell.appearance().backgroundColor

color

65

StepsBackgroundView.appearance().backgroundColor

color

66

TimeRemainingLabel.appearance().font

color

67

TimeRemainingLabel.appearance().normalTextColor
 TimeRemainingLabel.appearance().trafficHeavyColor

color

68

TimeRemainingLabel.appearance().trafficLowColor

color

69

TimeRemainingLabel.appearance().trafficModerateColor

color

70

TimeRemainingLabel.appearance().trafficSevereColor

color

71

TimeRemainingLabel.appearance().trafficUnknownColor

color

72

WayNameLabel.appearance().normalFont

color

73

WayNameLabel.appearance().normalTextColor

color

74

WayNameView.appearance().backgroundColor

color

75

WayNameView.appearance().borderColor

color

76

SpeedView.appearance().textColor

color

77

SpeedView.appearance().signBackColor

color

A Full example of Navigation Style

1
ArrivalTimeLabel.appearance().font = UIFont.systemFont(ofSize: 18, weight: .medium).adjustedFont
2
ArrivalTimeLabel.appearance().normalTextColor = .defaultPrimaryText
3
BottomBannerContentView.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
4
BottomBannerView.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
5
Button.appearance().textColor = .defaultPrimaryText
6
CancelButton.appearance().backgroundColor = colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1)
7
CancelButton.appearance().textFont = UIFont.systemFont(ofSize: 16, weight: .regular).adjustedFont
8
CancelButton.appearance().textColor = colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
9
OverviewButton.appearance().borderColor = colorLiteral(red: 0.94117647, green: 0.95294118, blue: 1, alpha: 1)
10
OverviewButton.appearance().tintColor = colorLiteral(red: 0.2566259801, green: 0.3436664343, blue: 0.8086165786, alpha: 0.6812137831)
11
DismissButton.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
12
DismissButton.appearance().textColor = colorLiteral(red: 0.09803921569, green: 0.09803921569, blue: 0.09803921569, alpha: 1)
13
DismissButton.appearance().textFont = UIFont.systemFont(ofSize: 20, weight: .medium).adjustedFont
14
DistanceLabel.appearance().unitFont = UIFont.systemFont(ofSize: 14, weight: .medium).adjustedFont
15
DistanceLabel.appearance().valueFont = UIFont.systemFont(ofSize: 22, weight: .medium).adjustedFont
16
DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor = colorLiteral(red: 0.980392158, green: 0.980392158, blue: 0.980392158, alpha: 1)
17
DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor = colorLiteral(red: 0.980392158, green: 0.980392158, blue: 0.980392158, alpha: 1)
18
DistanceLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).unitTextColor = colorLiteral(red: 0.3999999762, green: 0.3999999762, blue: 0.3999999762, alpha: 1)
19
DistanceLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).valueTextColor = colorLiteral(red: 0.3999999762, green: 0.3999999762, blue: 0.3999999762, alpha: 1)
20
DistanceRemainingLabel.appearance().font = UIFont.systemFont(ofSize: 18, weight: .medium).adjustedFont
21
DistanceRemainingLabel.appearance().normalTextColor = colorLiteral(red: 0.3999999762, green: 0.3999999762, blue: 0.3999999762, alpha: 1)
22
EndOfRouteButton.appearance().textColor = .darkGray
23
EndOfRouteButton.appearance().textFont = .systemFont(ofSize: 15)
24
EndOfRouteContentView.appearance().backgroundColor = .white
25
EndOfRouteStaticLabel.appearance().normalFont = .systemFont(ofSize: 14.0)
26
EndOfRouteStaticLabel.appearance().normalTextColor = colorLiteral(red: 0.217173934, green: 0.3645851612, blue: 0.489295125, alpha: 1)
27
EndOfRouteTitleLabel.appearance().normalFont = .systemFont(ofSize: 36.0)
28
EndOfRouteTitleLabel.appearance().normalTextColor = .black
29
ExitView.appearance().backgroundColor = .clear
30
ExitView.appearance().borderWidth = 1.0
31
ExitView.appearance().cornerRadius = 5.0
32
ExitView.appearance().foregroundColor = .black
33
ExitView.appearance(for: UITraitCollection(userInterfaceIdiom: .carPlay)).foregroundColor = .white
34
FloatingButton.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
35
FloatingButton.appearance().tintColor = tintColor
36
GenericRouteShield.appearance().backgroundColor = .clear
37
GenericRouteShield.appearance().borderWidth = 1.0
38
GenericRouteShield.appearance().cornerRadius = 5.0
39
GenericRouteShield.appearance().foregroundColor = .black
40
GenericRouteShield.appearance(for: UITraitCollection(userInterfaceIdiom: .carPlay)).foregroundColor = .white
41
InstructionsBannerContentView.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
42
InstructionsBannerView.appearance().backgroundColor = colorLiteral(red: 0.2755675018, green: 0.7829894423, blue: 0.3109624088, alpha: 1)
43
LaneView.appearance().primaryColor = .defaultLaneArrowPrimary
44
LaneView.appearance().secondaryColor = .defaultLaneArrowSecondary
45
LanesView.appearance().backgroundColor = colorLiteral(red: 0.1522715986, green: 0.5290428996, blue: 0.1787364483, alpha: 1)
46
LineView.appearance().lineColor = colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.1)
47
ManeuverView.appearance().backgroundColor = .clear
48
ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).primaryColor = .defaultTurnArrowPrimary
49
ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).secondaryColor = .defaultTurnArrowSecondary
50
ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).primaryColor = .defaultTurnArrowPrimary
51
ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).secondaryColor = .defaultTurnArrowSecondary
52
ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).primaryColor = colorLiteral(red: 0.2392157018, green: 0.2392157018, blue: 0.2392157018, alpha: 1) //.defaultTurnArrowPrimary
53
ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).secondaryColor = .defaultTurnArrowSecondary
54
NavigationMapView.appearance().maneuverArrowColor = .defaultManeuverArrow
55
NavigationMapView.appearance().maneuverArrowStrokeColor = .defaultManeuverArrowStroke
56
NavigationMapView.appearance().routeAlternateColor = .defaultAlternateLine
57
NavigationMapView.appearance().routeCasingColor = .defaultRouteCasing
58
NavigationMapView.appearance().trafficHeavyColor = .trafficHeavy
59
NavigationMapView.appearance().trafficLowColor = .trafficLow
60
NavigationMapView.appearance().trafficModerateColor = .trafficModerate
61
NavigationMapView.appearance().trafficSevereColor = .trafficSevere
62
NavigationMapView.appearance().trafficUnknownColor = .trafficUnknown
63
NavigationView.appearance().backgroundColor = colorLiteral(red: 0.764706, green: 0.752941, blue: 0.733333, alpha: 1)
64
NextBannerView.appearance().backgroundColor = colorLiteral(red: 0.1522715986, green: 0.5290428996, blue: 0.1787364483, alpha: 1)
65
NextInstructionLabel.appearance().font = UIFont.systemFont(ofSize: 20, weight: .medium).adjustedFont
66
NextInstructionLabel.appearance().normalTextColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
67
PrimaryLabel.appearance().normalFont = UIFont.systemFont(ofSize: 30, weight: .medium).adjustedFont
68
PrimaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
69
PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor = colorLiteral(red: 0.09803921569, green: 0.09803921569, blue: 0.09803921569, alpha: 1)
70
PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalFont = UIFont.systemFont(ofSize: 15, weight: .medium).adjustedFont
71
ProgressBar.appearance().barColor = colorLiteral(red: 0.149, green: 0.239, blue: 0.341, alpha: 1)
72
RatingControl.appearance().normalColor = colorLiteral(red: 0.8508961797, green: 0.8510394692, blue: 0.850877285, alpha: 1)
73
RatingControl.appearance().selectedColor = colorLiteral(red: 0.1205472574, green: 0.2422055006, blue: 0.3489340544, alpha: 1)
74
ReportButton.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
75
ReportButton.appearance().textColor = tintColor!
76
ReportButton.appearance().textFont = UIFont.systemFont(ofSize: 15, weight: .medium).adjustedFont
77
ResumeButton.appearance().backgroundColor = colorLiteral(red: 0.4609908462, green: 0.5315783024, blue: 0.9125307202, alpha: 1)
78
ResumeButton.appearance().tintColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
79
SecondaryLabel.appearance().normalFont = UIFont.systemFont(ofSize: 26, weight: .medium).adjustedFont
80
SecondaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = colorLiteral(red: 0.2156862745, green: 0.2156862745, blue: 0.2156862745, alpha: 1)
81
SecondaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor = colorLiteral(red: 0.2156862745, green: 0.2156862745, blue: 0.2156862745, alpha: 1)
82
SeparatorView.appearance().backgroundColor = colorLiteral(red: 0.737254902, green: 0.7960784314, blue: 0.8705882353, alpha: 1)
83
StatusView.appearance().backgroundColor = UIColor.black.withAlphaComponent(2.0/3.0)
84
StepInstructionsView.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
85
StepListIndicatorView.appearance().gradientColors = [ colorLiteral(red: 0.431372549, green: 0.431372549, blue: 0.431372549, alpha: 1), colorLiteral(red: 0.6274509804, green: 0.6274509804, blue: 0.6274509804, alpha: 1), colorLiteral(red: 0.431372549, green: 0.431372549, blue: 0.431372549, alpha: 1)]
86
StepTableViewCell.appearance().backgroundColor = colorLiteral(red: 0.9675388083, green: 0.9675388083, blue: 0.9675388083, alpha: 1)
87
StepsBackgroundView.appearance().backgroundColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
88
TimeRemainingLabel.appearance().font = UIFont.systemFont(ofSize: 28, weight: .medium).adjustedFont
89
TimeRemainingLabel.appearance().normalTextColor = .defaultPrimaryText
90
TimeRemainingLabel.appearance().trafficHeavyColor = colorLiteral(red:0.91, green:0.20, blue:0.25, alpha:1.0)
91
TimeRemainingLabel.appearance().trafficLowColor = colorLiteral(red: 0.4666666687, green: 0.7647058964, blue: 0.2666666806, alpha: 1)
92
TimeRemainingLabel.appearance().trafficModerateColor = colorLiteral(red:0.95, green:0.65, blue:0.31, alpha:1.0)
93
TimeRemainingLabel.appearance().trafficSevereColor = colorLiteral(red: 0.7705719471, green: 0.1753477752, blue: 0.1177056804, alpha: 1)
94
TimeRemainingLabel.appearance().trafficUnknownColor = .defaultPrimaryText
95
//UserPuckCourseView.appearance().puckColor = #colorLiteral(red: 0.4609908462, green: 0.5315783024, blue: 0.9125307202, alpha: 1)
96
WayNameLabel.appearance().normalFont = UIFont.systemFont(ofSize:20, weight: .medium).adjustedFont
97
WayNameLabel.appearance().normalTextColor = colorLiteral(red: 0.968627451, green: 0.968627451, blue: 0.968627451, alpha: 1)
98
WayNameView.appearance().backgroundColor = UIColor.defaultRouteLayer.withAlphaComponent(0.85)
99
WayNameView.appearance().borderColor = UIColor.defaultRouteCasing.withAlphaComponent(0.8)
100
SpeedView.appearance().textColor = UIColor.defaultPrimaryText
101
SpeedView.appearance().signBackColor = colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)

Customize navigation screen styles

Our navigation SDK includes two default classes, DayStyle and NightStyle, for providing different color schemes for day and night modes. If you need to customize the color styles of specific components, you can inherit these classes and modify the relevant control properties in the apply() method. Please refer to the following code for an example of how to create a custom style.

1
class YourDayStyle: DayStyle {
2
3
required init() {
4
super.init()
5
}
6
7
override func apply() {
8
super.apply()
9
BottomBannerView.appearance().backgroundColor = .orange
10
...
11
}
12
}
1
2
open class DayStyle: Style {
3
4
public required init() {
5
super.init()
6
mapStyleURL = NGLStyle.navigationGuidanceDayStyleURL
7
styleType = .day
8
statusBarStyle = .default
9
}
10
11
open override func apply() {
12
super.apply()
13
BottomBannerView.appearance().backgroundColor = .orange
14
...
15
}
16
}
1
2
open class NightStyle: Style {
3
4
public required init() {
5
super.init()
6
mapStyleURL = NGLStyle.navigationGuidanceDayStyleURL
7
styleType = .night
8
statusBarStyle = .default
9
}
10
11
open override func apply() {
12
super.apply()
13
14
// General styling
15
if let color = UIApplication.shared.delegate?.window??.tintColor {
16
tintColor = color
17
} else {
18
tintColor = .defaultTint
19
}
20
21
BottomBannerView.appearance().backgroundColor = .orange
22
...
23
}
24
}

If you want to see all the available control properties for customization, you can refer to this section of the code.

1
ArrivalTimeLabel.appearance().font
2
ArrivalTimeLabel.appearance().normalTextColor
3
4
BottomBannerContentView.appearance().backgroundColor
5
BottomBannerView.appearance().backgroundColor
6
7
Button.appearance().textColor
8
9
CancelButton.appearance().backgroundColor
10
CancelButton.appearance().textFont
11
CancelButton.appearance().textColor
12
13
OverviewButton.appearance().borderColor
14
OverviewButton.appearance().tintColor
15
16
DismissButton.appearance().backgroundColor
17
DismissButton.appearance().textColor
18
DismissButton.appearance().textFont
19
20
DistanceLabel.appearance().unitFont
21
DistanceLabel.appearance().valueFont
22
DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor
23
DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor
24
DistanceLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).unitTextColor
25
DistanceLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).valueTextColor
26
27
DistanceRemainingLabel.appearance().font
28
DistanceRemainingLabel.appearance().normalTextColor
29
30
EndOfRouteButton.appearance().textColor
31
EndOfRouteButton.appearance().textFont
32
EndOfRouteContentView.appearance().backgroundColor
33
EndOfRouteStaticLabel.appearance().normalFont
34
EndOfRouteStaticLabel.appearance().normalTextColor
35
EndOfRouteTitleLabel.appearance().normalFont
36
EndOfRouteTitleLabel.appearance().normalTextColor
37
38
ExitView.appearance().backgroundColor
39
ExitView.appearance().borderWidth
40
ExitView.appearance().cornerRadius
41
ExitView.appearance().foregroundColor
42
ExitView.appearance(for: UITraitCollection(userInterfaceIdiom: .carPlay)).foregroundColor
43
44
FloatingButton.appearance().backgroundColor
45
FloatingButton.appearance().tintColor
46
47
GenericRouteShield.appearance().backgroundColor
48
GenericRouteShield.appearance().borderWidth
49
GenericRouteShield.appearance().cornerRadius
50
GenericRouteShield.appearance().foregroundColor
51
GenericRouteShield.appearance(for: UITraitCollection(userInterfaceIdiom: .carPlay)).foregroundColor
52
53
InstructionsBannerContentView.appearance().backgroundColor
54
InstructionsBannerView.appearance().backgroundColor
55
56
LaneView.appearance().primaryColor
57
LaneView.appearance().secondaryColor
58
LanesView.appearance().backgroundColor
59
LineView.appearance().lineColor
60
61
ManeuverView.appearance().backgroundColor
62
ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).primaryColor
63
ManeuverView.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).secondaryColor
64
ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).primaryColor
65
ManeuverView.appearance(whenContainedInInstancesOf: [NextBannerView.self]).secondaryColor
66
ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).primaryColor
67
ManeuverView.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).secondaryColor
68
69
NavigationMapView.appearance().maneuverArrowColor
70
NavigationMapView.appearance().maneuverArrowStrokeColor
71
NavigationMapView.appearance().routeAlternateColor
72
NavigationMapView.appearance().routeCasingColor
73
NavigationMapView.appearance().trafficHeavyColor
74
NavigationMapView.appearance().trafficLowColor
75
NavigationMapView.appearance().trafficModerateColor
76
NavigationMapView.appearance().trafficSevereColor
77
NavigationMapView.appearance().trafficUnknownColor
78
NavigationView.appearance().backgroundColor
79
80
NextBannerView.appearance().backgroundColor
81
NextInstructionLabel.appearance().font
82
NextInstructionLabel.appearance().normalTextColor
83
84
PrimaryLabel.appearance().normalFont
85
PrimaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor
86
PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor
87
PrimaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalFont
88
89
ProgressBar.appearance().barColor
90
91
RatingControl.appearance().normalColor
92
RatingControl.appearance().selectedColor
93
ReportButton.appearance().backgroundColor
94
ReportButton.appearance().textColor
95
ReportButton.appearance().textFont
96
97
ResumeButton.appearance().backgroundColor
98
ResumeButton.appearance().tintColor
99
100
SecondaryLabel.appearance().normalFont
101
SecondaryLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor
102
SecondaryLabel.appearance(whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor
103
SeparatorView.appearance().backgroundColor
104
StatusView.appearance().backgroundColor
105
StepInstructionsView.appearance().backgroundColor
106
StepListIndicatorView.appearance().gradientColors 0.6274509804, blue: 0.6274509804, alpha: 1), colorLiteral(red: 0.431372549, green: 0.431372549, blue: 0.431372549, alpha: 1)]
107
108
StepTableViewCell.appearance().backgroundColor
109
StepsBackgroundView.appearance().backgroundColor
110
111
TimeRemainingLabel.appearance().font
112
TimeRemainingLabel.appearance().normalTextColor
113
TimeRemainingLabel.appearance().trafficHeavyColor
114
TimeRemainingLabel.appearance().trafficLowColor
115
TimeRemainingLabel.appearance().trafficModerateColor
116
TimeRemainingLabel.appearance().trafficSevereColor
117
TimeRemainingLabel.appearance().trafficUnknownColor
118
119
UserPuckCourseView.appearance().puckColor
120
121
WayNameLabel.appearance().normalFont
122
WayNameLabel.appearance().normalTextColor
123
WayNameView.appearance().backgroundColor
124
WayNameView.appearance().borderColor
125
126
SpeedView.appearance().textColor
127
SpeedView.appearance().signBackColor

When initializing NavigationOptions, you can pass an array of styles. If you only want to support one mode (day or night), you can pass the corresponding style in the array. Additionally, you can use the automaticallyAdjustsStyleForTimeOfDay property of NavigationViewController to automatically switch between day and night styles based on the current time.

1
let styles = [YourDayStyle(), YourNightStyle()]
2
let navigationOptions = NavigationOptions(styles:styles,navigationService: navigationService)
3
let navigationViewController = NavigationViewController(for: routes,navigationOptions: navigationOptions)
4
navigationViewController.automaticallyAdjustsStyleForTimeOfDay = true

Use a different destination icon

If you need to customize the destination icon on the map page of the app's home screen, you can use the NavigationMapView proxy method. Here's an example of how to implement it:

1
// Set the delegate for the mapview
2
mapView.delegate = self
3
4
// Implement the delegate method for customizing the destination icon
5
extension ViewController: NGLMapViewDelegate {
6
func mapView(_ mapView: NGLMapView, imageFor annotation: NGLAnnotation) -> NGLAnnotationImage? {
7
// Create a custom image for the destination icon
8
let image = UIImage(named: "destination_icon", in: .main, compatibleWith: nil)!.withRenderingMode(.alwaysOriginal)
9
return NGLAnnotationImage(image: image, reuseIdentifier: "destination_icon_identifier")
10
}
11
}

In the code snippet above, we set the delegate for the mapView object to the ViewController instance. Then, we implement the mapView(_:imageFor:) delegate method to create a custom image for the destination icon. This method is called by the NavigationMapView proxy when it needs to display an annotation image.

For the navigation pages, if you want to customize the destination icon, you can use the NavigationViewControllerDelegate method.

1
2
// Initialize the NavigationViewController with the provided routes and navigation options
3
let navigationViewController = NavigationViewController(for: routes, navigationOptions: navigationOptions)
4
5
// Set the delegate of the NavigationViewController to subscribe to NavigationView's events (optional)
6
navigationViewController.delegate = self
7
8
// Set the presentation style of the NavigationViewController to full-screen
9
navigationViewController.modalPresentationStyle = .fullScreen
10
11
// Implement the delegate method for customizing the destination icon
12
extension ViewController: NavigationViewControllerDelegate {
13
func navigationViewController(_ navigationViewController: NavigationViewController, imageFor annotation: NGLAnnotation) -> NGLAnnotationImage? {
14
// Create a custom image for the destination icon
15
let image = UIImage(named: "destination_icon", in: .main, compatibleWith: nil)!.withRenderingMode(.alwaysOriginal)
16
return NGLAnnotationImage(image: image, reuseIdentifier: "destination_icon_identifier")
17
}
18
}

In the code snippet above, we initialize the navigationViewController object with the provided routes and navigation options, and set its delegate to the ViewController instance. We also set the presentation style to full screen.

Then, we implement the navigationViewController(_:imageFor:) delegate method to create a custom image for the destination icon. This method is called by the NavigationViewController when it needs to display an annotation image.

Customize the route style

documentation image

Colors

1
NavigationMapView.appearance().routeAlternateColor = .defaultAlternateLine
2
NavigationMapView.appearance().routeCasingColor = .defaultRouteCasing
3
NavigationMapView.appearance().trafficHeavyColor = .trafficHeavy
4
NavigationMapView.appearance().trafficLowColor = .trafficLow
5
NavigationMapView.appearance().trafficModerateColor = .trafficModerate
6
NavigationMapView.appearance().trafficSevereColor = .trafficSevere
7
NavigationMapView.appearance().trafficUnknownColor = .trafficUnknown

Upcoming Maneuver arrow

1
NavigationMapView.appearance().maneuverArrowColor = .defaultManeuverArrow
2
NavigationMapView.appearance().maneuverArrowStrokeColor = .defaultManeuverArrowStroke

The default values:

No.Attribute NameColor Code/ Value
1routeColor#7588E9
2routeShieldColor#7588E9
3routeModerateCongestionColor#F3A64F
4routeSevereCongestionColor#E93340
5maneuverArrowColor#FFFFFF
6maneuverArrowBorderColor#2D3F53
7routeScale0.8
8roundedLineCaptrue

Customize the colors of banner instructions

No.Attribute NameType

1

InstructionsBannerView.appearance().backgroundColor

color

2

ManeuverView.appearance(whenContainedInInstancesOf:
[InstructionsBannerView.self]).primaryColor

color

3

ManeuverView.appearance(whenContainedInInstancesOf:
[InstructionsBannerView.self]).secondaryColor

color

4

ManeuverView.appearance(whenContainedInInstancesOf:
[NextBannerView.self]).primaryColor

color

5

ManeuverView.appearance(whenContainedInInstancesOf:
[NextBannerView.self]).secondaryColor

color

6

ManeuverView.appearance(whenContainedInInstancesOf:
[NextBannerView.self]).secondaryColor

color

7

ManeuverView.appearance(whenContainedInInstancesOf:
[StepInstructionsView.self]).secondaryColor

color

8

NextBannerView.appearance().backgroundColor

color

9

NextInstructionLabel.appearance().font

font

10

NextInstructionLabel.appearance().normalTextColor

color

11

PrimaryLabel.appearance().normalFont

font

12

PrimaryLabel.appearance(whenContainedInInstancesOf:
[InstructionsBannerView.self]).normalTextColor

color

13

PrimaryLabel.appearance(whenContainedInInstancesOf:
[StepInstructionsView.self]).normalTextColor

color

14

PrimaryLabel.appearance(whenContainedInInstancesOf:
[StepInstructionsView.self]).normalFont

font

Voice Instruction

For the voice instruction, we can pass the voiceController into navigationOptions when starting the navigation, and the delegate of the voiceController

Code example

1
2
// Initialize RouteVoiceController
3
let voiceController = RouteVoiceController()
4
// Setup VoiceControllerDelegate
5
voiceController.voiceControllerDelegate = self
6
let navigationOptions = NavigationOptions(styles: styles, navigationService: navigationService,voiceController: voiceController)
7
8
let navigationViewController = NavigationViewController(for: routes,navigationOptions: navigationOptions)

Delegate implementation

1
extension ViewController: VoiceControllerDelegate {
2
// Called when there is an error with speaking a voice instruction.
3
func voiceController(_ voiceController: RouteVoiceController, spokenInstructionsDidFailWith error: Error) {
4
print(error.localizedDescription)
5
}
6
// Called when an instruction is interrupted by a new voice instruction.
7
func voiceController(_ voiceController: RouteVoiceController, didInterrupt interruptedInstruction: SpokenInstruction, with interruptingInstruction: SpokenInstruction) {
8
print(interruptedInstruction.text, interruptingInstruction.text)
9
}
10
11
func voiceController(_ voiceController: RouteVoiceController, willSpeak instruction: SpokenInstruction, routeProgress: RouteProgress) -> SpokenInstruction? {
12
return SpokenInstruction(distanceAlongStep: instruction.distanceAlongStep, text: "New Instruction!", ssmlText: "<speak>New Instruction!</speak>",unit: .meters)
13
}
14
}

Change the base map’s style

To specify the style of the MapView in the Homepage, we can set the styleURL property when initializing the MapView object:

1
// Set the style URL for the MapView in the Homepage
2
mapView?.styleURL = URL(string: styleUrl)

In the code snippet above, we set the styleURL property of the mapView object to the specified URL string. This URL determines the visual style of the map displayed on the MapView object on the Homepage.

To specify the style of the MapView in the Navigation Page, we can create a custom style class that inherits from one of the default style classes (such as DayStyle), and set the mapStyleURL property in the initializer:

1
// Define a custom style class that inherits from DayStyle
2
class CustomDayStyle: DayStyle {
3
required init() {
4
super.init()
5
mapStyleURL = URL(string: styleUrl)
6
}
7
}

In the code snippet above, we define a new class CustomDayStyle that inherits from DayStyle. In the initializer of this class, we call the super.init() method to initialize the base properties of the DayStyle class, and then set the mapStyleURL property to the specified URL string. This custom style class can be used to provide a unique visual style for the MapView object in the Navigation Page.

© 2024 NextBillion.ai all rights reserved.