Camera

The HERE SDK provides a number of ways to change the view on a map. While you can use map styles to change the look of the map, you can use a camera to view the map from different perspectives.

For example, the HERE SDK allows you to set a target location, tilt the camera, zoom in and out, or set a bearing angle.

At a glance

  • Use the MapCamera returned by mapView.camera to manipulate the view of the map.
  • Set a new target location by calling camera.lookAt(point: GeoCoordinates(latitude: 52.530932, longitude: 13.384915)).
  • Zoom the map by setting a distance in meters: camera.lookAt(point: GeoCoordinates(latitude: 52.530932, longitude: 13.384915), distanceInMeters: 1000 * 2). Get the current distance from the camera's State property.
  • Set a MapCamera.OrientationUpdate() to specify the tilt angle and bearing angle of the camera.
  • Get the bounds of the currently displayed area from camera.boundingBox.
  • Set the bounds of an area to display by calling camera.lookAt(area: geoBox, orientation: MapCamera.OrientationUpdate()).

By default, the camera is located centered above the map. From a bird's eye view looking straight-down, the map is oriented North-up. This means that on your device, the top edge is pointing to the north of the map.

Rotate the Camera

With the camera, you cannot rotate the map directly, but change the camera's orientation instead. By changing the bearing parameter of the MapCamera.OrientationUpdate(), you will have the same effect as when rotating the map.

The orientation of the map is usually specified by a bearing angle. 'Bearing' is a navigational term, counted in degrees, from the North in a clockwise direction.

Illustration: Bearing direction.

By default, the camera has a bearing value of 0° degrees. By setting a bearing angle of 45°, as visualized in the illustration above, the map appears to the camera's eye as it rotates counter-clockwise and the direction of the bearing becomes the new upward direction on your map, pointing to the top edge of your device. This is similar to holding and rotating a paper map while hiking in a certain direction. Apparently, it is easier to orient yourself if the map's top edge points in the direction in which you want to go. However, this will not always be the true North direction (bearing = 0°).

Note that the bearing axis is always perpendicular to the ground and passes through the camera, regardless of the current camera orientation.

The following code rotates the camera by 90°:

let orientation = MapCamera.OrientationUpdate(bearing: 90,
                                              tilt: 0)
mapView.camera.lookAt(point: GeoCoordinates(latitude: 52.373556, longitude: 13.114358),
                      orientation: orientation,
                      distanceInMeters: 1000 * 7)

Effectively, for the viewer this lets the map appear rotated by 90° to the left.

Tilt the Camera

The camera can also be used to transform the flat 2D map surface to a 3D perspective to see, for example, roads at a greater distance that may appear towards the horizon. By default, the camera is not tilted (tilt = 0°).

In addition to the tilt value of the camera, the camera's bearing angle (see above) can be manipulated. Here we show the effect of changing the tilt value. Look at the illustration below to see the available camera axes.

A tilt value of 0° means that the camera's optical axis is perpendicular to the ground. The tilt angle is always calculated from this perpendicular axis. The tilt angle relates to the optical axis of the camera.

As visualized in the illustration, tilting the camera by 45° will change the bird's eye view of the camera to a 3D perspective. Use the code below to change only the tilt value of the camera:

let orientation = MapCamera.OrientationUpdate(bearing: 0,
                                              tilt: 45)
mapView.camera.lookAt(point: GeoCoordinates(latitude: 52.373556, longitude: 13.114358),
                      orientation: orientation,
                      distanceInMeters: 1000 * 7)

Any subsequent tilt value will always be applied from the camera's default location. This is the same for the tilt angle and the bearing angle of the camera. Some values will be clamped when they are out of range.

Illustration: The axes of the camera for bearing and tilt.

All axes can be manipulated at the same time. Changing the bearing value will give different results when the camera is tilted.

Change the Camera Location

By setting a new camera target, you can change the camera's location and effectively change the location that is shown at the center of the map view. The lookAt() method is available in different overloads. Just a few examples:

// Change only the location.
camera.lookAt(point: GeoCoordinates(latitude: 52.530932, longitude: 13.384915))

// Change zoom and location.
camera.lookAt(point: GeoCoordinates(latitude: 52.530932, longitude: 13.384915),
              distanceInMeters: 1000 * 2)

// Change location area and orientation.
let geoBox = GeoBox(southWestCorner: GeoCoordinates(latitude: 52.373556, longitude: 13.114358),
                    northEastCorner: GeoCoordinates(latitude: 52.611022, longitude: 13.479493))
let orientation = MapCamera.OrientationUpdate(bearing: 0,
                                              tilt: 45)
camera.lookAt(area: geoBox,
              orientation: orientation)

Note that changing the orientation (bearing, tilt) of the camera does not change the location of the map.

Note: Important

The HERE SDK also supports dedicated zoom levels in the range [0,22] to provide a quick way to achieve the desired level of detail. Call the camera's zoomBy() method to set the zoom level and access the current zoom level from the camera's State property. Important: The zoom level is set as Double, be sure to not mix it with the distanceInMeters parameter that is also of type Double.

By changing the camera, you can only programmatically change the perspective of the map view, but you do not have direct control of the map view itself - like when performing gestures to zoom the map or to rotate or to tilt the map. See the Gestures section for an overview of the available gestures to manipulate the map directly.

results matching ""

    No results matching ""