User Interfaces and Customization

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

Base Maps(StyleUrl)
RoutLine
Instruction Banner
Bottom Summary
Steps list
Location Component
Destination Marker

A screenshot of the navigation screen's components.

Attribute definition summary:

No.	Attribute Name	Type
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)

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

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 Name	Color Code/ Value
1	routeColor	#7588E9
2	routeShieldColor	#7588E9
3	routeModerateCongestionColor	#F3A64F
4	routeSevereCongestionColor	#E93340
5	maneuverArrowColor	#FFFFFF
6	maneuverArrowBorderColor	#2D3F53
7	routeScale	0.8
8	roundedLineCap	true

Customize the colors of banner instructions

No.	Attribute Name	Type
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.

User Interfaces and Customization

Components of Navigation View

Customize the navigation view

Customize navigation screen styles

Use a different destination icon

Customize the route style

Colors

Upcoming Maneuver arrow

Customize the colors of banner instructions

Voice Instruction

Change the base map’s style

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

UNITED STATES

SINGAPORE