THIS SDK ISDEPRECATED.

We rolled out a new and better SDK for you.

Multiple maps

Maps SDK supports displaying multiple instances of a map at the same time. You can put as many map objects as you want on the same Activity without any issues.

In this tutorial we are going to add a mini map to a fragment which will be displayed over an activity that already contains a MapFragment.

We can define a fragment layout which contains a mini map as:

1<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tomtom="http://schemas.android.com/apk/res-auto"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent">
5
6 <fragment
7 android:id="@+id/mini_map_fragment"
8 android:name="com.tomtom.online.sdk.map.MapFragment"
9 android:layout_width="@dimen/mini_map_size"
10 android:layout_height="@dimen/mini_map_size"
11 android:layout_gravity="top|end"
12 android:layout_margin="@dimen/mini_map_margin"
13 android:background="@color/solid_black"
14 android:padding="@dimen/mini_map_border"
15 tomtom:customMapBackgroundColor="@color/solid_black"
16 tomtom:mapsApiKey="@string/maps_api_key" />
17</FrameLayout>

Initialization of mini map:

1miniMapFragment = childFragmentManager.findFragmentById(R.id.mini_map_fragment) as MapFragment
2// Make sure that mini map is drawn on top of the main map
3// If not set, the mini map may be invisible on old devices
4// with low Android version.
5miniMapFragment.setZOrderMediaOverlay(true)

Sample use case: You want to show a mini map with the night style and a different zoom level than the main map.

Before any operation can be done on the map, we need to obtain a reference to a TomtomMap:

miniMapFragment.getAsyncMap { miniTomtomMap -> "your code" }

To configure map behaviour use:

1miniTomtomMap.uiSettings.compassView.hide()
2miniTomtomMap.uiSettings.currentLocationView.hide()
3miniTomtomMap.uiSettings.setStyleUrl(NIGHT_STYLE_URL_PATH)
4miniTomtomMap.uiSettings.logoView.applyInvertedLogo()
5miniTomtomMap.uiSettings.copyrightsView.applyInvertedColor()
6
7miniTomtomMap.updateGesturesConfiguration(
8 GesturesConfiguration.Builder()
9 .zoomEnabled(false)
10 .panningEnabled(false)
11 .rotationEnabled(false)
12 .tiltEnabled(false)
13 .build()
14)

At this point mini map will have all of the gestures disabled. Moving the camera to a new location requires information from the main map.

We can obtain a new camera position for our mini map using TomtomMapCallback.OnCameraMoveFinishedListener which will be registered in the main map.

Define TomtomMapCallback.OnCameraMoveFinishedListener as:

1private val onCameraMoveFinished = object : TomtomMapCallback.OnCameraMoveFinishedListener {
2 override fun onCameraMoveFinished() {
3 // This callback is not called too often, only when map centering animation or map transition using gestures is finished.
4 // To have more frequent updates, one can register for the onCameraChanged listener.
5 // However, this may cause performance issues as onCameraChanged is called very often.
6 mainViewModel.applyOnMap(MapAction {
7
8 val cameraPosition = uiSettings.cameraPosition
9 val miniMapZoomLevel = if (cameraPosition.zoom <= MAP_ZOOM_LEVEL_FOR_SECOND_MAP) {
10 cameraPosition.zoom
11 } else {
12 cameraPosition.zoom - MAP_ZOOM_LEVEL_FOR_SECOND_MAP
13 }
14
15 val miniMapBearing = cameraPosition.bearing
16 val miniMapPosition = CameraPosition.builder()
17 .focusPosition(centerOfMap)
18 .zoom(miniMapZoomLevel)
19 .bearing(miniMapBearing)
20 .animationDuration(SECOND_MAP_ANIMATION_TIME)
21 .build()
22
23 viewModel.applyOnMiniMap(MapAction { uiSettings.cameraPosition = miniMapPosition })
24 })
25 }
26}

Then register the callback in the main map:

tomtomMap.addOnCameraMoveFinishedListener(onCameraMoveFinished)

To unregister the callback use:

tomtomMap.removeOnCameraMoveFinishedListener(onCameraMoveFinished)