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)
102

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.

1class 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
2open 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
2open 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.

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
2let styles = [YourDayStyle(), YourNightStyle()]
3let navigationOptions = NavigationOptions(styles:styles,navigationService: navigationService)
4 let navigationViewController = NavigationViewController(for: routes,navigationOptions: navigationOptions)
5        navigationViewController.automaticallyAdjustsStyleForTimeOfDay = true
6

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
2mapView.delegate = self
3
4// Implement the delegate method for customizing the destination icon
5extension 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
3let navigationViewController = NavigationViewController(for: routes, navigationOptions: navigationOptions)
4
5// Set the delegate of the NavigationViewController to subscribe to NavigationView's events (optional)
6navigationViewController.delegate = self
7
8// Set the presentation style of the NavigationViewController to full-screen
9navigationViewController.modalPresentationStyle = .fullScreen
10
11// Implement the delegate method for customizing the destination icon
12extension 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

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

Upcoming Maneuver arrow

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

The default values:

_	Attribute Name	Color Code
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

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

Codes example

1
2// Initialize  RouteVoiceController
3let 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

1extension 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}

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
2mapView?.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
2class 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.

Map Display and Navigation

SDK Configuration and Plug-in

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

PLATFORM

SOLUTIONS

RESOURCES

COMPANY

UNITED STATES

SINGAPORE