Developer
THIS SDK ISDEPRECATED.

We rolled out a new and better SDK for you.

CHECK IT OUT

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)
image