The Maps SDK's maps are represented as a flat plane using a Mercator projection. On the east-west-axis, the map seamlessly wraps around on itself an infinite amount of times. Because the bottom and the top of the map could infinitely grow larger and further distort the map towards the poles, the north-south-axis gets cut off around the 90 degrees north and 90 degrees south. With this in mind, the camera object's introduced to represent the user's viewpoint above the map.
By default, the camera can be tilted, rotated, zoomed, and/or moved either by the user or developer. It's important to know that the camera object will not make any changes to markers, layer's sources, or other annotations that you've added without you directly influencing this behavior.
A few camera event listeners are provided in the Maps SDK to notify when, for example, the camera's adjusted. You can read more about these listeners inside the Events documentation.
The Maps SDK includes a
CameraPosition class which comprises of the camera's target, angle, zoom, and tilt. These APIs shape the user's perspective of the map tile(s).
CameraPosition object can change a single property of the camera object such as the zoom, or it can change multiple properties at the same time. For example, you could write code to have the camera change its target, zoom out, and tilt all at the same time:
CameraPosition position = new CameraPosition.Builder().target(new LatLng(51.50550, -0.07520)).zoom(10).tilt(20).build();
Read all about mapView XML attributes to learn about setting the camera's initial position. You should either set the initial camera position in XML or through
MapboxMapOptions to prevent unnecessary downloading of map tiles using up your user's data.
The target is a single latitude and longitude coordinate that the camera centers itself on. Changing the camera's target will move the camera to the inputted coordinates. The target is a
LatLng object. The target coordinate is always at the center of the viewport.
Tilt is the camera's angle from the nadir (directly facing the Earth) and uses unit degrees. The camera's minimum (default) tilt is 0 degrees, and the maximum tilt is 60. Tilt levels use six decimal point of precision, which enables you to restrict/set/lock a map's bearing with extreme precision.
The map camera tilt can also adjust by placing two fingertips on the map and moving both fingers up and down in parallel at the same time or
Bearing is the direction that the camera is pointing in and measured in degrees clockwise from north.
The camera's default bearing is 0 degrees (i.e. "true north") causing the map compass to hide until the camera bearing becomes a non-zero value. The
mapbox_uiCompass boolean XML attribute allows adjustment of the compass' visibility. Bearing levels use six decimal point precision, which enables you to restrict/set/lock a map's bearing with extreme precision. Besides programmatically adjusting the camera bearing, the user can place two fingertips on the map and rotate their fingers.
Zoom controls the scale of the map and consumes any value between 0 and 22. At zoom level 0, the viewport shows continents and other world features. A middle value of 11 will show city level details, and at a higher zoom level, the map will begin to show buildings and points of interest. The camera can zoom in the following ways:
- Pinch motion two fingers to zoom in and out.
- Quickly tap twice on the map with a single finger to zoom in.
- Quickly tap twice on the map with a single finger and hold your finger down on the screen after the second tap. Then slide the finger up to zoom out and down to zoom out.
Read Designing maps for mobile devices, about the art/science of maps and visual information, to make sure your map style shows the right data at the correct camera positions.
MapboxMap class in the Maps SDK has several methods to change the camera's position. Each camera movement API takes in a
CameraUpdate object. You should use the
CameraUpdateFactory class to provide the new camera position information.
CameraUpdateFactory can build several different
CameraUpdate objects including a
newLatLngBounds(), and several more. A straightforward method in
newCameraPosition() which is how you'd pass in a built
Aside from consuming a Camera Update object, a cancelable callback can be added to know when the animation finishes or if the user cancels the camera move by performing a gesture on the map. The ease and animate APIs have an optional duration parameter (in milliseconds) that lets you control the camera's animation duration.
|Repositions the camera according to the instructions defined in the update and moves the camera instantaneous. It's recommended to avoid this API in favor of either the ease or animate camera APIs which will provide more context to your users where on the map the camera is positioning itself.|
|Gradually move the camera by the default duration, the zoom will not be affected unless specified within CameraUpdate. If you plan to have the map camera track the current user as they move this is the correct API to use since one of the parameters can be set to false, Disabling the animation interpolator and resulting in a linear ease animation.|
|Animate the camera to a new location defined within CameraUpdate using a transition animation that evokes powered flight.|
getCameraPosition() method helps your code understand what is going on with your map's camera and what the user's viewing. The method returns a
CameraPosition object, and once you have the object, you can get and use the camera's target, tilt, zoom, and bearing values. For example,
mapboxMap.getCameraPosition().zoom is how you would get the camera's current zoom value.
Like how a camera can be restricted to a region (see below), the camera can also center within a map area. First you'll need a defined
LatLngBounds object which includes at least two coordinates. You'll then be able to update the camera position using the available
newLatLngBounds() API which takes your bounding box and adjust the viewport so the specified region will be within view. Besides the bounding box being passed into the camera update factory, you will also need to provide an integer value defining the padding between the edge of the screen and the actual bounded region. You also have the option to provide different padding values for each side of the box.
LatLngBounds latLngBounds = new LatLngBounds.Builder().include(first marker position).include(second marker position).build();mapboxMap.animateCamera(CameraUpdateFactory.newLatLngBounds(latLngBounds, 10));
setLatLngBoundsForCameraTarget method in the
MapboxMap class can limit the map camera to any area of the world that you'd like. If you feed the
LatLngBounds object a minimum of two
LatLng objects/coordinates, an invisible rectangle will automatically be created to restrict the camera to the region.
If you'd like to learn more about camera control and its role in your project's user interface experience, make sure to read about the camera options that the Mapbox Location Layer Component provides.