• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom Map Camera Animation

This example shows how to customize the camera for NGLMapView. You can set the map camera or direction by use the following methods:

  • setCenter

  • setVisibleCoordinateBounds

  • setVisibleCoordinates

  • setCamera

  • fly

  • setDirection

  • setZoomLevel

For all code examples, refer to Maps Code Examples

MapsCameraViewController view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
import Foundation
import UIKit
import Nbmap
enum CameraType{
    case CameraSetCenterCoordinate
    case CameraSetCenterCoordinateWithZoomLevel
    case CameraSetCenterCoordinateWithZoomLevelAndDirection
    case CameraSetCenterCoordinateWithZoomLevelAndDirectionCompletion
    case SetZoomLevel
    case SetDirection
case SetVisibleCoordinateBounds
    case SetVisibleCoordinateBoundsWithEdgePadding
    case SetVisibleCoordinatesWithEdgePadding
    case SetVisibleCoordinatesWithEdgePaddingAndDirectionAndDuration
    case SetCamera
    case SetCameraWithDuration
    case SetCameraWithDurationAndCompletionHandler
    case FlyToCamera
    case FlyToCameraWithDuration
    case FlyToCameraWithDurationAndPeakAltitude
}
class MapsCameraViewController: UIViewController {
    
    var nbMapView: NGLMapView! {
        didSet {
            oldValue?.removeFromSuperview()
            if let mapView = nbMapView {
                configureMapView(nbMapView)
                view.insertSubview(mapView, at: 0)
            }
        }
    }
    
    var button: UIButton!
    
    let typeList = [
        CameraType.CameraSetCenterCoordinate,
        CameraType.CameraSetCenterCoordinateWithZoomLevel,
        CameraType.CameraSetCenterCoordinateWithZoomLevelAndDirection,
        CameraType.CameraSetCenterCoordinateWithZoomLevelAndDirectionCompletion,
        CameraType.SetZoomLevel,
        CameraType.SetDirection,
        CameraType.SetVisibleCoordinateBounds,
        CameraType.SetVisibleCoordinateBoundsWithEdgePadding,
        CameraType.SetVisibleCoordinatesWithEdgePadding,
        CameraType.SetVisibleCoordinatesWithEdgePaddingAndDirectionAndDuration,
        CameraType.SetCamera,
        CameraType.SetCameraWithDuration,
        CameraType.SetCameraWithDurationAndCompletionHandler,
        CameraType.FlyToCamera,
        CameraType.FlyToCameraWithDuration,
        CameraType.FlyToCameraWithDurationAndPeakAltitude,
    ]
    
    func configureMapView(_ mapView: NGLMapView) {
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        mapView.delegate = self
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        nbMapView = NGLMapView(frame:self.view.bounds)
        
        button = UIButton(type: .system)
        button.setTitle("Settings", for: .normal)
        button.addTarget(self, action: #selector(showSetings), for: .touchUpInside)
        button.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
        navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
        
    }
    
    @objc func showSetings() {
        let tableViewController = UITableViewController(style: .plain)
        tableViewController.tableView.delegate = self
        tableViewController.tableView.dataSource = self
        tableViewController.title = "Camera Settings"
        self.present(tableViewController, animated: true)
    }
    
    /**
     Perform operations on the map based on user selection
     @param type:  The type which user selected. user to perform operations on the map
     */
    func performeSettings(type: CameraType) {
        switch type {
        case CameraType.CameraSetCenterCoordinate :
            nbMapView.setCenter(CLLocationCoordinate2DMake(53.5511, 9.9937),animated: true )
            break
        case .CameraSetCenterCoordinateWithZoomLevel:
            nbMapView.setCenter(CLLocationCoordinate2DMake(53.5511, 9.9937),zoomLevel: 18 ,animated: true )
            break
        case CameraType.CameraSetCenterCoordinateWithZoomLevelAndDirection :
            nbMapView.setCenter(CLLocationCoordinate2DMake(53.5511, 9.9937),zoomLevel: 18 ,direction: 180, animated: true )
            break
        case CameraType.CameraSetCenterCoordinateWithZoomLevelAndDirectionCompletion :
            nbMapView.setCenter(CLLocationCoordinate2DMake(53.5511, 9.9937),zoomLevel: 18 ,direction: 180, animated: true ,completionHandler: {
                
            })
            break
        case CameraType.SetZoomLevel :
            nbMapView.setZoomLevel(17, animated: true)
            break
        case CameraType.SetDirection :
            nbMapView.setDirection(0, animated: true)
            break
        case .SetVisibleCoordinateBounds:
            let coords = [
                CLLocationCoordinate2DMake(53.5511, 9.9937),
                CLLocationCoordinate2DMake(53.5311, 9.9947),
                CLLocationCoordinate2DMake(53.5531, 9.9957),
                CLLocationCoordinate2DMake(53.5521, 9.9967)
            ]
            let bounds = NGLPolygon(coordinates: coords, count: UInt(coords.count)).overlayBounds
            //  Changes the receiver's viewport to fit the given coordinate bounds, optionally animating the change.
            nbMapView.setVisibleCoordinateBounds(bounds,animated: true)
            break
        case .SetVisibleCoordinateBoundsWithEdgePadding:
            let coords = [
                CLLocationCoordinate2DMake(53.5511, 9.9937),
                CLLocationCoordinate2DMake(53.5311, 9.9947),
                CLLocationCoordinate2DMake(53.5531, 9.9957),
                CLLocationCoordinate2DMake(53.5521, 9.9967)
            ]
            let bounds = NGLPolygon(coordinates: coords, count: UInt(coords.count)).overlayBounds
            //  Changes the receiver's viewport to fit the given coordinate bounds with some additional padding on each side, optionally calling a completion handler.
            nbMapView.setVisibleCoordinateBounds(bounds,edgePadding: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10),animated: true,completionHandler: {})
            break
        case .SetVisibleCoordinatesWithEdgePadding:
            let coords = [
                CLLocationCoordinate2DMake(53.5511, 9.9937),
                CLLocationCoordinate2DMake(53.5313, 9.9947),
                CLLocationCoordinate2DMake(53.5531, 9.9937),
                CLLocationCoordinate2DMake(53.5526, 9.9968)
            ]
            //  Changes the receiver's viewport to fit all of the given coordinates with some additional padding on each side.
            nbMapView.setVisibleCoordinates(coords,count: UInt(coords.count),edgePadding: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10),animated: true)
            break
        case .SetVisibleCoordinatesWithEdgePaddingAndDirectionAndDuration:
            let coords = [
                CLLocationCoordinate2DMake(53.5511, 9.9937),
                CLLocationCoordinate2DMake(53.5313, 9.9987),
                CLLocationCoordinate2DMake(53.5533, 9.9947),
                CLLocationCoordinate2DMake(53.5529, 9.9938)
            ]
            let function: CAMediaTimingFunction? = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
            //  Changes the receiver's viewport to fit all of the given coordinates with some additional padding on each side, optionally calling a completion handler.
            nbMapView.setVisibleCoordinates(coords,count: UInt(coords.count),edgePadding: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10),direction:160, duration: 2, animationTimingFunction: function,completionHandler: nil)
            break
        case CameraType.SetCamera :
            let camera =  NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
                                       acrossDistance:1000,
                                                pitch:0,
                                              heading:0)
            //  Moves the viewpoint to a different location with respect to the map with an
            //  optional transition animation. For animated changes, wait until the map view has
            //  finished loading before calling this method.
            nbMapView.setCamera(camera, animated: true)
            break
        case .SetCameraWithDuration:
            let camera =  NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
                                       acrossDistance:1000,
                                                pitch:0,
                                              heading:0)
            let function: CAMediaTimingFunction? = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
            // Moves the viewpoint to a different location with respect to the map with an
            // optional transition duration and timing function. For animated changes, wait
            // until the map view has finished loading before calling this method.
            nbMapView.setCamera(camera, withDuration: 1 ,animationTimingFunction: function)
            break
            
        case   CameraType.SetCameraWithDurationAndCompletionHandler:
            let function: CAMediaTimingFunction? = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
            let camera =  NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
                                       acrossDistance:1000,
                                                pitch:0,
                                              heading:0)
            //  Moves the viewpoint to a different location with respect to the map with an
            //  optional transition duration and timing function. For animated changes, wait
            //  until the map view has finished loading before calling this method.
            nbMapView.setCamera(camera, withDuration: 1 ,animationTimingFunction: function,completionHandler: {
                
            })
            break
        case CameraType.FlyToCamera :
            let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
                                       acrossDistance:1000,
                                                pitch:0,
                                              heading:0)
            //  Moves the viewpoint to a different location using a transition animation that
            //  evokes powered flight and a default duration based on the length of the flight path.
            
            // The transition animation seamlessly incorporates zooming and panning to help
            // the user find his or her bearings even after traversing a great distance.
            nbMapView.fly(to: camera)
            break
        case CameraType.FlyToCameraWithDuration :
            let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
                                       acrossDistance:1000,
                                                pitch:0,
                                              heading:0)
            // Moves the viewpoint to a different location using a transition animation that
            // evokes powered flight and an optional transition duration.
            // The transition animation seamlessly incorporates zooming and panning to help
            // the user find his or her bearings even after traversing a great distance.
            nbMapView.fly(to: camera, withDuration: 2 , completionHandler: {
                
            })
            break
        case CameraType.FlyToCameraWithDurationAndPeakAltitude :
            let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(53.5511, 9.9937),
                                       acrossDistance:1000,
                                                pitch:0,
                                              heading:0)
            
            // Moves the viewpoint to a different location using a transition animation that
            //  evokes powered flight and an optional transition duration and peak altitude.
            // The transition animation seamlessly incorporates zooming and panning to help
            // the user find his or her bearings even after traversing a great distance.
            nbMapView.fly(to: camera, withDuration: 2 , peakAltitude: 1000 ,completionHandler: {
                
            })
            break
       
        }
        
    }
}
extension MapsCameraViewController: NGLMapViewDelegate {
    func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
        
        nbMapView.zoomLevel = 16.0
        nbMapView.setCenter(CLLocationCoordinate2DMake(53.5511, 9.9937),animated: false)
        
    }
}
extension MapsCameraViewController: UITableViewDelegate, UITableViewDataSource {
    
    func settingsTitlesForRaw(index: Int) -> String {
        let type = typeList[index]
        switch type {
            case CameraType.CameraSetCenterCoordinate :
                return "Camera Set Center Coordinate"
            case CameraType.CameraSetCenterCoordinateWithZoomLevelAndDirection :
                return "Set center coordinate with zoom level and direction"
            case CameraType.CameraSetCenterCoordinateWithZoomLevelAndDirectionCompletion :
                return "Set center coordinate with zoom level and direction completion handler"
            case CameraType.SetZoomLevel :
                return "Set zoom level"
            case CameraType.SetDirection :
                return "Set direction"
            case CameraType.SetVisibleCoordinateBounds :
                return "Set visible coordinate bounds"
            case CameraType.SetVisibleCoordinateBoundsWithEdgePadding :
                return "Set visible coordinate bounds with edge padding"
            case .SetVisibleCoordinatesWithEdgePadding:
                return "Set visible coordinates with edge padding"
            case .SetVisibleCoordinatesWithEdgePaddingAndDirectionAndDuration:
                return "Set visible coordinates with edge padding and direction and direction"
            case CameraType.SetCamera :
                return "Set camera"
            case CameraType.FlyToCamera :
                return "Fly to camera"
            case CameraType.FlyToCameraWithDuration :
                return "Fly to camera with duration"
            case CameraType.FlyToCameraWithDurationAndPeakAltitude :
                return "Fly to camera with duration and peak altitude"
            case .CameraSetCenterCoordinateWithZoomLevel:
                return "Set center coordinate with zoom level"
            case .SetCameraWithDurationAndCompletionHandler:
                return "Set camera with duration and completion handler"
            case .SetCameraWithDuration:
                return "Set camera with duration"
        }
    }
    // UITableViewDelegate 和 UITableViewDataSource 方法的实现
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         return typeList.count
     }
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
         cell.textLabel?.text = settingsTitlesForRaw(index: indexPath.row)
         return cell
     }
     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
         tableView.isHidden = true
         let type = typeList[indexPath.row]
        dismissSettings(type: type)
     }
    
    func dismissSettings(type: CameraType) {
        dismiss(animated: true)
        performeSettings(type: type)
    }
}

The given example demonstrates how to initialize a MapView and perform various operations on the nbMapView object.

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.

Operations on nbMapView: The code includes a performeSettings(type:) method that performs different operations on the nbMapView based on the selected CameraType. The following operations are performed:

  • Camera Set Center Coordinate: Sets the center coordinate of the map view with optional animation.

  • Camera Set Center Coordinate with Zoom Level: Sets the center coordinate of the map view with a specific zoom level and optional animation.

  • Camera Set Center Coordinate with Zoom Level and Direction: Sets the center coordinate of the map view with a specific zoom level (18) and direction (180) and optional animation.

  • Camera Set Center Coordinate with Zoom Level, Direction, and Completion: Sets the center coordinate of the map view with a specific zoom level (18), direction (180), and optional animation, along with a completion handler.

  • Set Zoom Level: Sets the zoom level of the map view to 17 with optional animation.

  • Set Direction: Sets the direction (heading) of the map view to 0 with optional animation.

  • Set Visible Coordinate Bounds: Sets the visible coordinate bounds of the map view to a polygon defined by four coordinates, with optional animation.

  • **Set Visible Coordinate Bounds with Edge Padding:

  • **Sets the visible coordinate bounds of the map view to a polygon defined by four coordinates, with additional edge padding and optional animation.

  • Set Visible Coordinates with Edge Padding: Sets the visible coordinates of the map view to an array of coordinates, with additional edge padding and optional animation.

  • Set Visible Coordinates with Edge Padding, Direction, and Duration: Sets the visible coordinates of the map view to an array of coordinates, with additional edge padding, direction (160), duration (2 seconds), and optional animation.

  • Set Camera: Moves the viewpoint of the map to a different location specified by a NGLMapCamera object, with optional animation.

  • Set Camera with Duration: Moves the viewpoint of the map to a different location specified by a NGLMapCamera object, with a specific duration (1 second) and optional animation.

  • Set Camera with Duration and Completion Handler: Moves the viewpoint of the map to a different location specified by a NGLMapCamera object, with a specific duration (1 second), optional animation, and a completion handler.

  • Fly to Camera: Moves the viewpoint of the map to a different location specified by a NGLMapCamera object, using a transition animation that simulates powered flight.

  • Fly to Camera with Duration: Moves the viewpoint of the map to a different location specified by a NGLMapCamera object, using a transition animation that simulates powered flight, with a specific duration (2 seconds) and optional completion handler.

  • Fly to Camera with Duration and Peak Altitude: Moves the viewpoint of the map to a different location specified by a NGLMapCamera object, using a transition animation that simulates powered flight, with a specific duration (2 seconds), peak altitude (1000), and optional completion handler.