Map Custom Style

_{Last updated: April 24, 2026 | 2 minutes read}

UIKit

This example demonstrates how to apply a custom map style in a UIKit application. A custom map style can be created in our Map Studio.

Check the full implementation on GitHub.

Map view with custom style

Map Display and applying the Style

The following code outlines the main view, which displays the map and applies a custom style from the app's resources:

ViewController.swiftView on GitHub

class ViewController: UIViewController {

    var mapViewController: MapViewController?

    override func viewDidLoad() {

        super.viewDidLoad()

        if let navigationController = self.navigationController {

            let appearance = navigationController.navigationBar.standardAppearance

            navigationController.navigationBar.scrollEdgeAppearance = appearance
        }

        self.createMapView()

        self.mapViewController!.hideCompass()

        self.setCustomStyle()
    }

    override func viewWillAppear(_ animated: Bool) {

        super.viewWillAppear(animated)

        self.mapViewController!.startRender()
    }

    // MARK: - Map View

    func createMapView() {

        self.mapViewController = MapViewController.init()
        self.mapViewController!.view.backgroundColor = UIColor.systemBackground

        self.addChild(self.mapViewController!)
        self.view.addSubview(self.mapViewController!.view)
        self.mapViewController!.didMove(toParent: self)

        self.mapViewController?.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            self.mapViewController!.view.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0),
            self.mapViewController!.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 0),
            self.mapViewController!.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -0),
            self.mapViewController!.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -0)
        ])
    }

    func setCustomStyle() {

        if let url = Bundle.main.url(forResource: "Basic1Oldtime", withExtension: "style") {

            if let data = NSData.init(contentsOf: url) as Data? {

                self.mapViewController!.applyStyle(withStyleBuffer: data, smoothTransition: false)
            }
        }
    }
}

SwiftUI

This example demonstrates how to apply a custom map style in a SwiftUI application. A custom map style can be created in our Map Studio.

Check the full implementation on GitHub.

Map view with custom style

Map Display and applying the Style

The following code outlines the main view, which displays the map and applies a custom style from the app's resources:

ContentView.swiftView on GitHub

struct ContentView: View {

    var body: some View {
        MapReader { proxy in
            MapBase()
                .onAppear {
                    applyCustomMapStyle(proxy)
                }
                .ignoresSafeArea()
        }
    }
    
    func applyCustomMapStyle(_ proxy: MapProxy) {
        guard let url = Bundle.main.url(forResource: "CustomMapStyle", withExtension: "style") else { return }
        if let data = NSData.init(contentsOf: url) as Data? {
            proxy.setMapStyle(data: data, smoothTransition: true)
        }
    }
}