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

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.

Custom Map Camera Animation

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

UNITED STATES

SINGAPORE