Overview

Map and app styling

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 options = NavigationOptions(styles: [CustomDayStyle(), CustomNightStyle()])
let navigation = NavigationViewController(for: route, options: options
Was this page helpful?