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

documentation image

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.

© 2024 NextBillion.ai all rights reserved.