Skip to main content

Map and app styling

Join the Mapbox Developers Discord Communityarrow-right
A newer version of the Navigation SDK is available

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.18.1, 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.

  1. While running your app, select the Debug View Hierarchy button.
  2. Select the view you wish to style.
  3. On the right side of your screen, note the class name.
  4. 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:

Join the Mapbox Developers Discord Communityarrow-right