Map and app styling
This page uses v1.4.2 of the Mapbox Navigation SDK. A newer version of the SDK is available. Learn about the latest version, v2.19.0, in the Navigation SDK documentation.
When using NavigationMapViewController, it's possible to apply custom fonts and colors to various parts of the UI.
Customize the style of UI elements
The easiest way to find elements and their class name to style is to use the Debug View Hierarchy feature in Xcode.
- While running your app, select the Debug View Hierarchy button.
- Select the view you wish to style.
- On the right side of your screen, note the class name.
- Apply your styling:
DistanceLabel.appearance(whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor = .red
It is also helpful to view the default styling applied by the DayStyle.
Customize the map style
Create a new Style class
Subclass DayStyle, and make the necessary changes:
class CustomDayStyle: DayStyle {
required init() {
super.init()
// Use a custom map style.
mapStyleURL = MGLStyle.satelliteStreetsStyleURL!
previewMapStyleURL = MGLStyle.satelliteStreetsStyleURL!
// Specify that the style should be used during the day.
styleType = .day
}
override func apply() {
super.apply()
// Begin styling the UI
BottomBannerView.appearance().backgroundColor = .orange
}
}
You can provide a custom night style that will be used at night and while the user is in tunnels.
class CustomNightStyle: NightStyle {
required init() {
super.init()
// Specify that the style should be used at night.
styleType = .night
}
override func apply() {
super.apply()
// Begin styling the UI
BottomBannerView.appearance().backgroundColor = .purple
}
}
Then, initialize NavigationMapViewController with these styles.
let navigationOptions = NavigationOptions(styles: [CustomDayStyle(), CustomNightStyle()])
let navigation = NavigationViewController(for: route, routeOptions: routeOptions, navigationOptions: navigationOptions)
Customize the contents of UI text
There are several ways to customize what kind of data appears in the UI including:
- Language used in instructions: Read more about localization in the Localization and internationalization guide.
- Displaying the current road name at the bottom of the view: To hide the road name label, implement
NavigationViewControllerDelegate.navigationViewController(_:roadNameAt:)to returnnil.