Camera and Animations

This section of the SDK focuses on manipulating the camera position and performing animations on a map. The camera represents the viewpoint or perspective from which the map is viewed, and adjusting its position allows users to navigate and explore the map dynamically.

Camera Position

Initial position

Similar to the above quickstart example, we can set the initial camera position in the map view delegate, as is shown in below example code:

1
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
2
        let centerCoords = CLLocationCoordinate2DMake(53.5511, 9.9937)
3
        let cameraZoomLevel = 16.0
4
        nbMapView.setCenter(centerCoords, zoomLevel: cameraZoomLevel, animated: false)
5
    }

The center coordinates and camera zoom level is configurable during the initialization of the map view.

Set position

After the map view is initialized successfully, we can also move the map view camera position based on needs. An example is provided below:

1
        let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
2
                                  acrossDistance:1000,
3
                                  pitch:0,
4
                                  heading:0)
5
        nbMapView.fly(to: camera, withDuration: 2 , completionHandler: {
6
            
7
        })
8
        // optional, can also change the camera zoom level here
9
        // nbMapView.setZoomLevel(17.0, animated: true)

Get position

We can also retrieve the current camera target position and camera zoom level if needed, the following code snippet shows how to achieve this:

1
        let cameraLat = nbMapView.centerCoordinate.latitude
2
        let cameraLong = nbMapView.centerCoordinate.longitude
3
        let zoomLevel = nbMapView.zoomLevel
4
        print("camera center latitude is: " + String(cameraLat))
5
        print("camera center longitude is: " + String(cameraLong))
6
        print("camera zoom level is: " + String(zoomLevel))

Fit/Bind camera to a given shape

We can also form a polygon shape based on given coordinates, and fit the map view camera to the polygon shape, please refer to the below code snippet for example:

1
        let coords = [
2
            CLLocationCoordinate2DMake(53.5511, 9.9937),
3
            CLLocationCoordinate2DMake(53.5311, 9.9947),
4
            CLLocationCoordinate2DMake(53.5531, 9.9957),
5
            CLLocationCoordinate2DMake(53.5521, 9.9967)
6
        ]
7
        let bounds = NGLPolygon(coordinates: coords, count: UInt(coords.count)).overlayBounds
8
        nbMapView.setVisibleCoordinateBounds(bounds,animated: true)

Listen to camera changes

We also allow listening to map view camera change via the following code example, just implement one of them in your delegate based on needs:

1
    func mapView(_ mapView: NGLMapView, shouldChangeFrom oldCamera: NGLMapCamera, to newCamera: NGLMapCamera) -> Bool {
2
        // add your logic here
3
        // remember this will be triggered multiple times for one user action
4
        return true
5
    }
6
    
7
    // If this method is implemented, the above shouldChangeFrom:to: function will not be called
8
    //    func mapView(_ mapView: NGLMapView, shouldChangeFrom oldCamera: NGLMapCamera, to  newCamera: NGLMapCamera, reason: NGLCameraChangeReason) -> Bool {
9
    //        // add your logic here
10
    //        // remember this will be triggered multiple times for one user action
11
    //        return true
12
    //    }

One thing to be aware of is, the later method will block the former one, so if you implement both of the methods, the first one will not be functional.

Restrict Camera

Besides the above camera operations, we can also customize whether to enable user actions on the map view. By default, the following actions are enabled, and we could disable part of them with the following code example:

1
        // disable map rotating
2
        nbMapView.allowsRotating = false
3
        // diable map scrolling up or down
4
        nbMapView.allowsScrolling = false
5
        // disable map tilt change
6
        nbMapView.allowsTilting = false
7
        // diable map zoom level change
8
        nbMapView.allowsZooming = false
9