Basic Map Display

Incorporating a map into your iOS application is made easy with our SDK, which provides a preconfigured style for seamless integration. The provided code snippet showcases how to add a MapView to your application with minimal effort.

1
import Foundation
2
import UIKit
3
import Nbmap
4
class MapViewController: UIViewController {
5
    var nbMapView: NGLMapView! {
6
        didSet {
7
            oldValue?.removeFromSuperview()
8
            if let mapView = nbMapView {
9
                configureMapView(nbMapView)
10
                view.insertSubview(mapView, at: 0)
11
            }
12
        }
13
    }
14
    
15
    func configureMapView(_ mapView: NGLMapView) {
16
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
17
        
18
    }
19
    
20
    override func viewDidLoad() {
21
        super.viewDidLoad()
22
        nbMapView = NGLMapView(frame:self.view.bounds)
23
    }
24
}

Code Summary

To begin, you'll need to create a MapViewController class that inherits from UIViewController. Inside this class, you'll find a variable named nbMapView of type NGLMapView. This variable is responsible for managing the MapView instance.

The didSet property observer ensures that the previous MapView instance is removed from the superview when a new instance is assigned to nbMapView. It then configures the new MapView by calling the configureMapView() function and inserts it as a subview in the view hierarchy.

The configureMapView() function allows for additional customization of the MapView. In the provided code, it sets the autoresizing mask to ensure the MapView adjusts its size based on its parent view.

Within the viewDidLoad() method of the MapViewController, a new instance of NGLMapView is created and assigned to the nbMapView variable. This initializes the MapView and sets its frame to match the bounds of the view controller's view.

By following this example, you'll be able to quickly add the first MapView to your iOS application, providing a foundation for further customization and interaction with the map.

Move camera position

In the process of working with a map in your iOS application, it may be necessary to adjust the camera position to focus on a specific location or area. This can be achieved by utilizing the Move Camera Position functionality provided by our SDK.

To demonstrate this, the provided code snippet shows how to move the map camera position to a desired location.

1
import Foundation
2
import UIKit
3
import Nbmap
4
class MapViewController: UIViewController {
5
    
6
    var nbMapView: NGLMapView! {
7
        didSet {
8
            oldValue?.removeFromSuperview()
9
            if let mapView = nbMapView {
10
                configureMapView(nbMapView)
11
                view.insertSubview(mapView, at: 0)
12
                mapView.delegate = self
13
            }
14
        }
15
    }
16
    
17
    
18
    func configureMapView(_ mapView: NGLMapView) {
19
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
20
        
21
    }
22
    
23
    override func viewDidLoad() {
24
        super.viewDidLoad()
25
        nbMapView = NGLMapView(frame:self.view.bounds)
26
    }
27
}
28

29
extension MapViewController: NGLMapViewDelegate {
30
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
31
        
32
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.97780156, 77.59656748),
33
                                  acrossDistance:10000,
34
                                  pitch:0,
35
                                  heading:0)
36
        nbMapView.fly(to: camera)
37
        
38
    }
39
}

In the MapViewController class, a mapView delegate is set, allowing for the execution of custom behaviors when the map finishes loading. Inside the mapView(_:didFinishLoading:) delegate method, a new NGLMapCamera instance is created. This camera object specifies the desired position by providing the coordinates of the center location, the distance across the view, the pitch and the heading. Adjust these values as needed to achieve the desired camera position. Finally, the nbMapView.fly(to:) method is called, triggering the map to animate smoothly to the specified camera position. This provides a visually pleasing transition for the user.

By following this example, you can easily implement the Move Camera Position functionality in your iOS application, allowing you to dynamically adjust the view and focus on specific areas or locations within the map.

Annotations

Annotations play a crucial role in providing visual markers and information on a map within an iOS application. They allow developers to highlight points of interest, specific locations, or custom data on the map surface. With the help of our SDK, incorporating annotations into your iOS application becomes effortless.

Add Markers to MapView

Adding markers to a MapView is a fundamental task when working with maps in an iOS application. Markers serve as visual indicators on the map to represent specific locations or points of interest. With the help of our iOS SDK, incorporating markers into your MapView becomes a seamless process.

The provided code snippet demonstrates how to add markers to the MapView.

1
import Foundation
2
import UIKit
3
import Nbmap
4
class MarkerViewController: UIViewController {
5
    
6
    var nbMapView: NGLMapView! {
7
        didSet {
8
            oldValue?.removeFromSuperview()
9
            if let mapView = nbMapView {
10
                view.insertSubview(mapView, at: 0)
11
                mapView.delegate = self
12
            }
13
        }
14
    }
15
    
16
    var points : Array = [CLLocationCoordinate2D]()
17
    
18
    override func viewDidLoad() {
19
        super.viewDidLoad()
20
        nbMapView = NGLMapView(frame:self.view.bounds)
21
        addMarker()
22
    }
23
    
24
    func addMarker(){
25
        let locations: [CLLocationCoordinate2D] =  [
26
            CLLocationCoordinate2D(latitude: 12.97780156, longitude: 77.59656748),
27
            CLLocationCoordinate2D(latitude: 12.98208919, longitude: 77.60329262)
28
        ]
29
        
30
        if let currentAnnotations = nbMapView.annotations {
31
            nbMapView.removeAnnotations(currentAnnotations)
32
        }
33
        
34
        nbMapView.addAnnotations(locations.map({(coord)->
35
            NGLPointAnnotation in
36
            let annotation = NGLPointAnnotation()
37
            annotation.coordinate = coord
38
            return annotation
39
        }))
40
        
41
    }
42
}
43

44
extension MarkerViewController: NGLMapViewDelegate {
45
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
46
        
47
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.97780156, 77.59656748),
48
                                  acrossDistance:10000,
49
                                  pitch:0,
50
                                  heading:0)
51
        nbMapView.fly(to: camera)
52
        
53
    }
54
}

In the MarkerViewController class, the nbMapView instance is set up and configured. The addMarker() method is then called, which adds multiple markers to the MapView. Inside the addMarker() method, an array of CLLocationCoordinate2D objects is created, representing the desired marker locations. The current annotations on the MapView are first removed, and then new NGLPointAnnotation objects are added for each coordinate in the array. These annotations are customized with their respective coordinates. By utilizing the addAnnotations() method of the MapView, the markers are added to the map surface, visually representing the specified locations. In the mapView(_:didFinishLoading:) delegate method, a camera position is set to focus on a specific coordinate, ensuring that the markers are visible on the MapView. The nbMapView.fly(to:) method is then called to animate the camera movement to the specified position.

By following this example and incorporating the provided code into your iOS application, you can easily add markers to the MapView, enabling you to highlight important locations or points of interest within your map-based application.

Add a Polyline to MapView

Adding a polyline to a MapView can greatly enhance the visual representation of routes or paths in your iOS application. Our SDK simplifies the process of incorporating a polyline by providing a default polyline style that you can easily integrate.

The provided code snippet demonstrates how to add a polyline to the MapView.

1
import Foundation
2
import UIKit
3
import Nbmap
4
class MapViewController: UIViewController {
5
    
6
    var nbMapView: NGLMapView! {
7
        didSet {
8
            oldValue?.removeFromSuperview()
9
            if let mapView = nbMapView {
10
                configureMapView(nbMapView)
11
                view.insertSubview(mapView, at: 0)
12
                mapView.delegate = self
13
                drawPolyline()
14
            }
15
        }
16
    }
17
    
18
    let locations: [CLLocationCoordinate2D] =  [
19
               CLLocationCoordinate2D(latitude: 12.92948165, longitude: 77.61501446),
20
               CLLocationCoordinate2D(latitude: 12.95205978, longitude: 77.60494206),
21
               CLLocationCoordinate2D(latitude: 12.96612918, longitude: 77.60678866),
22
               CLLocationCoordinate2D(latitude: 12.96449325, longitude: 77.59654839)
23
           ]
24
    func drawPolyline(){
25
        if(locations.count > 1){
26
            let line = NGLPolyline(coordinates:locations,count: UInt(locations.count))
27
            nbMapView.addAnnotation(line)
28
            
29
        }
30
    }
31
    
32
    func configureMapView(_ mapView: NGLMapView) {
33
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
34
        
35
    }
36
    
37
    override func viewDidLoad() {
38
        super.viewDidLoad()
39
        nbMapView = NGLMapView(frame:self.view.bounds)
40
    }
41
}
42

43
extension MapViewController: NGLMapViewDelegate {
44
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
45
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.96612918, 77.60678866),
46
                                  acrossDistance:20000,
47
                                  pitch:0,
48
                                  heading:0)
49
        nbMapView.fly(to: camera)
50
        
51
    }
52
}

In the MapViewController class, the nbMapView instance is set up and configured. The drawPolyline() method is called within the didSet property observer of nbMapView, ensuring that the polyline is drawn when the MapView is ready.

Inside the drawPolyline() method, a polyline is created using the provided array of CLLocationCoordinate2D objects. This array represents the coordinates that form the points of the polyline. If the array contains more than one coordinate, the polyline is added as an annotation to the MapView using the nbMapView.addAnnotation() method.

In the mapView(_:didFinishLoading:) delegate method, a camera position is set to focus on a specific coordinate, ensuring that the added polyline is visible on the MapView. The nbMapView.fly(to:) method is then called to animate the camera movement to the specified position.

By following this example and incorporating the provided code into your iOS application, you can easily add a polyline to the MapView. The specified coordinates will be connected by a line, allowing you to display routes, paths, or any other desired lines on the map.

With the ability to add polylines to the MapView, you can effectively visualize routes, highlight paths, or display other line-based information within your map-based iOS application.

Add a Polygon to MapView

Incorporating polygons into your MapView can be an effective way to highlight specific areas or define boundaries in your iOS application. With our SDK, adding a polygon to the MapView is made simple by following a similar logic to that of drawing polylines. The provided code snippet demonstrates how to add a polygon to the MapView.

1
import Foundation
2
import UIKit
3
import Nbmap
4
class MapViewController: UIViewController {
5
    
6
    var nbMapView: NGLMapView! {
7
        didSet {
8
            oldValue?.removeFromSuperview()
9
            if let mapView = nbMapView {
10
                configureMapView(nbMapView)
11
                view.insertSubview(mapView, at: 0)
12
                mapView.delegate = self
13
                drawPolygon()
14
            }
15
        }
16
    }
17
    
18
    let locations: [CLLocationCoordinate2D] =  [
19
        CLLocationCoordinate2D(latitude: 12.92948165, longitude: 77.61501446),
20
        CLLocationCoordinate2D(latitude: 12.95205978, longitude: 77.60494206),
21
        CLLocationCoordinate2D(latitude: 12.96612918, longitude: 77.60678866),
22
        CLLocationCoordinate2D(latitude: 12.96449325, longitude: 77.59654839)
23
    ]
24
    
25
    func drawPolygon(){
26
        if let currentAnnotations = nbMapView.annotations {
27
            nbMapView.removeAnnotations(currentAnnotations)
28
        }
29
        
30
        let polygon: NGLPolygon = NGLPolygon.init(coordinates: locations, count: UInt(locations.count))
31
        nbMapView.addAnnotation(polygon)
32
    }
33
    
34
    func configureMapView(_ mapView: NGLMapView) {
35
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
36
        
37
    }
38
    
39
    override func viewDidLoad() {
40
        super.viewDidLoad()
41
        nbMapView = NGLMapView(frame:self.view.bounds)
42
    }
43
}
44

45
extension MapViewController: NGLMapViewDelegate {
46
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
47
        
48
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.96612918, 77.60678866),
49
                                  acrossDistance:20000,
50
                                  pitch:0,
51
                                  heading:0)
52
        nbMapView.fly(to: camera)
53
    }
54
}

Inside the MapViewController class, the nbMapView instance is set up and configured. The drawPolygon() method is called within the didSet property observer of nbMapView, ensuring that the polygon is drawn when the MapView is ready.

Within the drawPolygon() method, a polygon is created using the array of CLLocationCoordinate2D objects. These coordinates define the vertices of the polygon, and the count parameter specifies the number of vertices in the array. If there are existing annotations on the MapView, they are removed before adding the polygon annotation using the nbMapView.addAnnotation() method.

In the mapView(_:didFinishLoading:) delegate method, a camera position is set to focus on a specific coordinate, ensuring that the added polygon is visible on the MapView. The nbMapView.fly(to:) method is then called to animate the camera movement to the specified position.

By following this example and incorporating the provided code into your iOS application, you can easily add a polygon to the MapView. The specified coordinates will form the boundary of the polygon, allowing you to visually represent areas or boundaries on the map. With the ability to add polygons to the MapView, you can effectively showcase specific areas, boundaries, or any other enclosed regions within your map-based iOS application.

Add a Route Line to MapView

To display a route line, first fetch route geometry from your routing service, then render it on the map as a shape source and line style layer.

Recommended flow:

Get route geometry (GeoJSON or encoded polyline) from your routing backend.

1
import Foundation
2
import UIKit
3
import Nbmap
4
class MapViewController: UIViewController {
5
    
6
    var nbMapView: NGLMapView! {
7
        didSet {
8
            oldValue?.removeFromSuperview()
9
            if let mapView = nbMapView {
10
                configureMapView(nbMapView)
11
                view.insertSubview(mapView, at: 0)
12
                mapView.delegate = self
13
                drawDirections()
14
            }
15
        }
16
    }
17
    
18
    let locations: [CLLocationCoordinate2D] =  [
19
        CLLocationCoordinate2D(latitude: 12.96206481, longitude: 77.56687669),
20
        CLLocationCoordinate2D(latitude: 12.99150562, longitude: 77.61940507)
21
    ]
22
    
23
    func drawDirections(){        
24
        nbMapView.addAnnotations(locations.map({(coord)->
25
            NGLPointAnnotation in
26
            let annotation = NGLPointAnnotation()
27
            annotation.coordinate = coord
28
            return annotation
29
        }))
30
        
31
        let apiClient: NBAPIClient = NBAPIClient()
32
        apiClient.getDirections(locations) { [weak self] resp in
33
            guard let weakSelf = self else {
34
                return
35
            }
36
            let first = resp?.routes.first;
37
            if first is NBRoute {
38
                let route:NBRoute? = first as? NBRoute
39
                let geometry = route?.geometry
40
                let routeline = GeometryDecoder.covert(toFeature: geometry, precision:5)
41
                let routeSource = NGLShapeSource.init(identifier: "route-style-source", shape: routeline)
42
                weakSelf.nbMapView.style?.addSource(routeSource)
43
                let routeLayer = NGLLineStyleLayer.init(identifier: "route-layer", source: routeSource)
44
                routeLayer.lineColor = NSExpression.init(forConstantValue: UIColor.red)
45
                routeLayer.lineWidth = NSExpression.init(forConstantValue: 2)
46
                
47
                weakSelf.nbMapView.style?.addLayer(routeLayer)
48
            }
49
        }
50
    }
51
    
52
    func configureMapView(_ mapView: NGLMapView) {
53
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
54
        
55
    }
56
    
57
    override func viewDidLoad() {
58
        super.viewDidLoad()
59
        nbMapView = NGLMapView(frame:self.view.bounds)
60
    }
61
}
62

63
extension MapViewController: NGLMapViewDelegate {
64
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){        
65
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.96206481, 77.56687669),
66
                                acrossDistance:50000,
67
                                pitch:0,
68
                                heading:0)
69
        nbMapView.fly(to: camera)
70
        
71
    }
72
}

Convert geometry to NGLShape / NGLFeature.
Add NGLShapeSource to map style.
Create NGLLineStyleLayer and set line color / width.
Add the layer after style load is complete in mapView(_:didFinishLoading:).

Note: Route fetching capability is provided by your routing API/service, not by the base map rendering API alone.

After adding the route layer, adjust camera bounds so the full route is visible. Use the style-load callback as the safe point to add route source and layers.