Customize NavigationMapView style at runtime

Customize the style of the NavigationMapView and choose a map style that best suits your preferences or the current context.

This example shows how to customize the NavigationMapView at runtime:

We have provided a list of available map-style URLs for choosing
A switch button is provided on the NavigationMapView, each time user clicks on the button will result in a different map-style URL to be set for the NavigationMapView

For all code examples, refer to Navigation Code Examples

CustomizeMapStyleViewController view source

1
import UIKit
2
import NbmapNavigation
3
import NbmapCoreNavigation
4
import NbmapDirections
5
import Nbmap
6

7
class CustomizeMapStyleViewController: UIViewController, NGLMapViewDelegate {
8
    
9
    var changeStyleButton = UIButton()
10
    let mapStyleList = ["https://api.nextbillion.io/maps/streets/style.json", "https://api.nextbillion.io/maps/hybrid/style.json", "https://api.nextbillion.io/maps/dark/style.json"]
11
    var buttonClickCount = 0
12
    
13
    var navigationMapView: NavigationMapView? {
14
        didSet {
15
            oldValue?.removeFromSuperview()
16
            if let navigationMapView = navigationMapView {
17
                view.insertSubview(navigationMapView, at: 0)
18
            }
19
        }
20
    }
21
    
22
    override func viewDidLoad() {
23
        super.viewDidLoad()
24
        
25
        self.navigationMapView = NavigationMapView(frame: view.bounds)
26
        navigationMapView?.userTrackingMode = .followWithHeading
27
        navigationMapView?.delegate = self
28
        
29
        setUpChangeStyleButton()
30
        
31
        self.view.setNeedsLayout()
32
    }
33
    
34
    func setUpChangeStyleButton(){
35
        changeStyleButton.setTitle("Switch", for: .normal)
36
        changeStyleButton.layer.cornerRadius = 5
37
        changeStyleButton.contentEdgeInsets = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
38
        changeStyleButton.backgroundColor = .blue
39
        
40
        changeStyleButton.addTarget(self, action: #selector(tappedButton), for: .touchUpInside)
41
        view.addSubview(changeStyleButton)
42
        changeStyleButton.translatesAutoresizingMaskIntoConstraints = false
43
        changeStyleButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -50).isActive = true
44
        changeStyleButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor).isActive = true
45
        changeStyleButton.titleLabel?.font = UIFont.systemFont(ofSize: 25)
46
    }
47
    
48
    @objc func tappedButton(sender: UIButton) {
49
        buttonClickCount = (buttonClickCount + 1) % 3
50
        
51
        self.navigationMapView?.styleURL = URL(string: mapStyleList[buttonClickCount])
52
    }
53
}

The code first imports the following frameworks:

UIKit
NbmapNavigation
NbmapCoreNavigation
NbmapDirections
Nbmap

These frameworks provide the necessary functionality to create a map view and customize its style.

The next part of the code defines a class called CustomizeMapStyleViewController. This class inherits from UIViewController and implements the NGLMapViewDelegate protocol.

The CustomizeMapStyleViewController class has the following properties:

changeStyleButton: A UIButton object that is used to change the map style.
mapStyleList: An array of String objects that contain the URLs of the map styles.
buttonClickCount: An Int variable that keeps track of the number of times the changeStyleButton has been clicked.

The CustomizeMapStyleViewController class also has the following methods:

viewDidLoad(): This method is called when the view controller is loaded. It initializes the map view and adds the changeStyleButton to the view.
setUpChangeStyleButton(): This method sets up the changeStyleButton. It sets the button's title, background color, and corner radius. It also adds the button as a target for the touchUpInside event.
tappedButton(): This method is called when the changeStyleButton is tapped. It increments the buttonClickCount variable and then sets the map view's style URL to the URL of the map style at the current index in the mapStyleList array.

The CustomizeMapStyleViewController class can be used to create a map view that can be customized by clicking the changeStyleButton. The map style can be changed to one of three styles: streets, hybrid, or dark.