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
1import Foundation
2import UIKit
3import Nbmap
4enum CameraType{
5 case CameraSetCenterCoordinate
6 case CameraSetCenterCoordinateWithZoomLevel
7 case CameraSetCenterCoordinateWithZoomLevelAndDirection
8 case CameraSetCenterCoordinateWithZoomLevelAndDirectionCompletion
9 case SetZoomLevel
10 case SetDirection
11case 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}
22class 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}
229extension 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}
237extension 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}
296The 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.
