Map centering

Center the map in your mobile app either at the current coordinates or any other location at the zoom level of your choice. Alternatively you can define an area of the map which will be displayed to the user. In the latter case the zoom level will be adjusted automatically.

Sample use case 1: You want to display the maps for selected cities in specific zoom levels. Your users should be able to easily switch between different locations.

Sample use case 2: You want to display an area determined by a certain bounding box.

Use the following code snippets in your app to display maps either of different locations (in this case, the current location and the TomTom offices in Amsterdam and Berlin) or of a certain area.

The example shows how to center the map on Amsterdam with the zoom level set to 10:

1tomtomMap.centerOn(CameraPosition.builder()
2        .focusPosition(Locations.AMSTERDAM_LOCATION)
3        .zoom(DEFAULT_ZOOM_LEVEL)
4        .bearing(MapConstants.ORIENTATION_NORTH)
5        .build())

1tomtomMap.centerOn(
2    CameraPosition.builder()
3        .focusPosition(location)
4        .zoom(zoomLevel)
5        .bearing(bearing.toDouble())
6        .build()
7)

The following example shows how to center the map on the area containing Amsterdam-Haarlem and Amsterdam-Center locations. Applied parameters make the map South-up oriented with a camera pitch set to 45 degrees.

1BoundingBox areaBox = new BoundingBox(topLeft, bottomRight);
2CameraFocusArea cameraFocusArea = new CameraFocusArea.Builder(areaBox)
3        .bearing(MapConstants.ORIENTATION_SOUTH)
4        .pitch(45.0)
5        .build();
6tomtomMap.centerOn(cameraFocusArea, new AnimationDuration(1500, TimeUnit.MILLISECONDS));

1val areaBox = BoundingBox(topLeft, bottomRight)
2val cameraFocusArea = CameraFocusArea.Builder(areaBox)
3    .apply {
4        bearing(orientation.toDouble())
5        pitch(45.0)
6    }
7    .build()
8tomtomMap.centerOn(cameraFocusArea, AnimationDuration(1500, TimeUnit.MILLISECONDS))