Map Directions

This example shows how to draw a directions on the NGLMapView.

• Request a direction by using NBAPIClient

• Get NBRoute object from the getDirections response

• Gets the geometry property from the NBRoute object.

• Converts the geometry property to a Feature object.

• Creates a NGLShapeSource object with the Feature object.

• Adds the NGLShapeSource object to the NGLMapView object's style.

• Creates a NGLShapeSource object with the NGLShapeSource object.

• Sets the lineColor property of the NGLLineStyleLayer object to red.

• Sets the lineWidth property of the NGLLineStyleLayer object.

• Adds the NGLLineStyleLayer object to the NGLMapView object's style.

For all code examples, refer to Maps Code Examples

DirectionsViewController view source

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

48
extension DirectionsViewController: NGLMapViewDelegate {
49
    // Set the camera after map style loaded
50
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
51
        
52
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.962, 77.56687669),
53
                                                                      acrossDistance:10000,
54
                                                                               pitch:0,
55
                                                                             heading:0)
56
        nbMapView.setCamera(camera, animated: false)
57
    
58
    }
59
}

The example code showcases a DirectionsViewController that initializes a MapView and includes a method called drawDirections() to draw directions on the map.

Initializing MapView:

• The code initializes a NGLMapView object called nbMapView in the viewDidLoad() method. It sets the frame of the map view to match the bounds of the current view controller's view. The map view is assigned as the delegate of the view controller.

drawDirections() method: The drawDirections() method is responsible for drawing directions on the map view. It performs the following steps:

• Defines an array of CLLocationCoordinate2D objects representing the locations for the directions.

• Creates an instance of NBAPIClient to interact with the map's API.

• Call the getDirections(_:completion:) method of the apiClient to retrieve the directions based on the specified locations.

• In the completion handler, it retrieves the first route from the response.

• If a route is found, it extracts the route's geometry and converts it into a NGLShape using the GeometryDecoder.covert(toFeature:precision:) method.

• Creates a NGLShapeSource using the converted route's shape and adds it to the map view's style.

• Creates a NGLLineStyleLayer using the route source and configures its properties like line color and width.

• Adds the route layer to the map view's style.

NGLMapViewDelegate:

• The code extends the DirectionsViewController to conform to the NGLMapViewDelegate protocol. It includes the mapView(_ style:) delegate method, which is called when the map style finishes loading. In this method, it creates a NGLMapCamera object and sets it as the camera for the map view.

Overall, this code initializes a MapView and uses the drawDirections() method to fetch and draw directions on the map view based on the provided locations.