Loading...

Camera Controls

To create rich experiences on top of the Mappedin iOS SDK, it's useful to be able to control the map view programmatically. This guide shows how to focus the map view on targets, how to listen to camera events and how to control the camera.

Note: A complete class that uses the code snippets in this guide can be found in the Mappedin iOS Github repo: CameraControlsVC.swift

Focus the Camera on Targets

To focus on a polygon after it has been touched, we use the onPolygonClicked() function in the MPIMapViewDelegate. In this case, we are targeting only the touched polygon. However, we can also give coordinates or nodes as MPIOptions.CameraTargets.

func onPolygonClicked(polygon: MPIPolygon) {
mapView?.cameraManager.focusOn(targets: MPIOptions.CameraTargets(polygons: [polygon]))
}

Listening to Camera Events

We can use the onCameraChanged() function in the MPIMapViewDelegate to monitor changes to the camera position, rotation, tilt, and zoom.

func onCameraChanged(cameraChange: Mappedin.MPICameraTransform) {
print("Position \(cameraChange.position)")
print("Rotation \(cameraChange.rotation)")
print("Tilt \(cameraChange.tilt)")
print("Zoom \(cameraChange.zoom)")
}

Controlling the Camera

Controlling the camera to set it to a specific tilt, rotation or zoom can be done with mapView.cameraManager.set() and configured MPIOptions.CameraConfiguration. Tilt and rotation are set as radians, where as zoom is in the camera distance in meters from the target.

mapView?.cameraManager.set(
cameraTransform: MPIOptions.CameraConfiguration(
zoom: 1234,
tilt: 0.3,
rotation: 1.5
)
)

It is possible to limit the tilting of the camera by listening to the change event and setting it to a desired value in onCameraChanged().

func onCameraChanged(cameraChange: Mappedin.MPICameraTransform) {
let tilt = 0.0
if(cameraChange.tilt != tilt) {
mapView?.cameraManager.set(cameraTransform: MPIOptions.CameraConfiguration(tilt: tilt))
}
}

If you want to be able to zoom in closer than the default limit, use the setter mapView?.cameraManager.setMinZoom(zoomLevel: 200.0).

Animation

The camera can also be animated to zoom, tilt and rotate to a MPINode or MPIMap.MPICoordinate. This works similar to the set methods described in the Controlling the Camera section above but instead of jumping directly to a camera position, the camera moves gradually to the new position. The MPICameraManager.animate() methods are use to accomplish this.

Animating to the node of a location:

let zoomTarget = mapView?.venueData?.locations.first(
where: { $0.name == "Sunglass Hut" })
let cameraTransform = MPIOptions.CameraTransformNode(
zoom: 50.0,
tilt: 2.0,
rotation: 180.0,
position:
zoomTarget?.nodes?.first)
let cameraAnimation = MPIOptions.CameraAnimation(
duration: 3000.0,
easing: MPIOptions.EASING_MODE.EASE_IN)
mapView?.cameraManager.animate(
cameraTransform: cameraTransform, options: cameraAnimation)

Animating to latitude and longitude coordinates:

let zoomCoordinate = mapView?.currentMap?.createCoordinate(
latitude: 43.86147923972817,
longitude: -78.94671703394187)
let cameraTransform = MPIOptions.CameraConfiguration(
zoom: 50.0,
tilt: 2.0,
rotation: 180.0,
position: zoomCoordinate)
let cameraAnimation = MPIOptions.CameraAnimation(
duration: 3000.0,
easing: MPIOptions.EASING_MODE.EASE_IN)
mapView?.cameraManager.animate(
cameraTransform: cameraTransform, options: cameraAnimation)

Reset Camera

To reset the camera, store the initial camera position in the onFirstMapLoaded() method. Then, at a later time these values can be used to reset the camera.

// Store the default camera values when the map is loaded.
func onFirstMapLoaded() {
defaultTilt = mapView?.cameraManager.tilt
defaultZoom = mapView?.cameraManager.zoom
defaultRotation = mapView?.cameraManager.rotation
defaultPosition = mapView?.cameraManager.position
}
// Use the default camera values to reposition the camera.
func resetCamera() {
mapView?.cameraManager.set(cameraTransform: MPIOptions.CameraConfiguration(
zoom: defaultZoom,
tilt: defaultTilt,
rotation: defaultRotation,
position: defaultPosition))
}

Note: A complete class that uses the code snippets in this guide can be found in the Mappedin iOS Github repo: CameraControlsVC.swift

Was this page helpful?

Next Topic

Blue Dot