Maps SDK for AndroidMap Extensions
Map Extensions
Have a look at our map extensions to make development more concise and pleasant.
Map UI Extensions
The Android Maps SDK provides the following built-in UI views:
-
Compass button
-
Current location button
-
Panning controls
-
Zooming controls
-
TomTom logo
You can toggle the visibility of these views using the UiSettings class. Changes made on this class are reflected on the map immediately. Each UI element has a pre defined style that determines its position relative to the edge of the map. This style can be overridden to provide a custom position, adjust size, or replace default colors. It is also possible to alter these parameters in runtime by modifying the view’s LayoutParams.
To use this library, add the following dependency to the build.gradle file:
api("com.tomtom.online:sdk-maps-ui-extensions:2.4725")Compass
By default, the compass button is enabled and located in the top left corner of the map - ‘MapView'. The compass appears only when the map orientation is different than zero (‘North' position). When the user clicks on the compass button, the map orientation is set to zero and the compass disappears.
 Default |
 Pressed |
 North up |
-
To disable the compass button:
_
tomtomMap.getUiSettings().getCompassView().hide();tomtomMap.uiSettings.compassView.hide()
-
To enable the compass button:
_
tomtomMap.getUiSettings().getCompassView().show();tomtomMap.uiSettings.compassView.show()
-
To override the default style:
<style name="CompassView" parent="BaseCompactView">
<item name="android:layout_gravity">top|start</item>
<item name="android:layout_marginStart">@dimen/compass_default_margin_start</item>
<item name="android:layout_marginTop">@dimen/compass_default_margin_top</item>
</style>
Current location
By default, the current location button is enabled and placed in the bottom left corner of the map -'MapView'. The current location button appears only when the map center position on the screen is different from user’s current location. When the user clicks on the current location button, the map location is set to the user’s location and the button disappears. The default action for the button centers the map on the user’s location if 'MapView' has been set up to show the current position on 'YES'.
 Default |
 Pressed |
-
To disable the current location button:
_
tomtomMap.getUiSettings().getCurrentLocationView().hide();tomtomMap.uiSettings.currentLocationView.hide()
-
To enable the current location button:
_
tomtomMap.getUiSettings().getCurrentLocationView().show();tomtomMap.uiSettings.currentLocationView.show()
-
To override the default style:
<style name="CenterOnCurrentLocationView" parent="BaseCenterOnCurrentLocationView">
<item name="android:layout_gravity">bottom|start</item>
<item name="android:layout_marginStart">@dimen/compass_default_margin_start</item>
<item name="android:layout_marginBottom">@dimen/current_location_default_margin_bottom</item>
</style>
Panning controls
By default, the panning controls view is disabled and it is placed vertically in the center and horizontally on right site of the map -'MapView'. The default action for the view is to move the map in the desired direction.
  Pan down |
  Pan left |
  Pan right |
  Pan up |
-
To enable the panning controls:
_
tomtomMap.getUiSettings().getPanningControlsView().show();tomtomMap.uiSettings.panningControlsView.show()
-
To disable the panning controls:
_
tomtomMap.getUiSettings().getPanningControlsView().hide();tomtomMap.uiSettings.panningControlsView.hide()
-
To override the default style:
<style name="ArrowButton" parent="GenericControlButton" />
<style name="ArrowButtonsGroup" parent="GenericControlButtonsGroup">
<item name="android:layout_width">150dp</item>
<item name="android:layout_marginRight">80dp</item>
</style>
Zooming controls
By default, the zooming controls view is disabled and it is placed vertically in the center and horizontally on right site of the map -'MapView'. The default action for the view is to zoom in or zoom out the map.
  Zoom in |
  Zoom out |
-
To enable the zooming controls:
_
tomtomMap.getUiSettings().getZoomingControlsView().show();tomtomMap.uiSettings.zoomingControlsView.show()
-
To disable the zooming controls:
_
tomtomMap.getUiSettings().getZoomingControlsView().hide();tomtomMap.uiSettings.zoomingControlsView.hide()
-
To override the default style:
<style name="ZoomButton" parent="GenericControlButton" />
<style name="ZoomButtonsGroup" parent="GenericControlButtonsGroup">
<item name="android:layout_width">@dimen/control_button_default_size</item>
</style>
TomTom logo
By default, logo is placed vertically on the bottom and horizontally on the left site of the map -'MapView'. However, the position of the logo can be changed around MapView.
 Default logo |
 Inverted logo colors |
-
To change logo gravity:
_
tomtomMap.getUiSettings().getLogoView().setGravity(gravity);tomtomMap.uiSettings.logoView.setGravity(gravity)
-
To restore logo gravity:
_
tomtomMap.getUiSettings().getLogoView().restoreDefaultGravity();tomtomMap.uiSettings.logoView.restoreDefaultGravity()
-
To change logo margins:
_
tomtomMap.getUiSettings().getLogoView().setMargins(left, top, right, bottom);tomtomMap.uiSettings.logoView.setMargins(left, top, right, bottom)
-
To restore logo margins:
_
tomtomMap.getUiSettings().getLogoView().restoreDefaultMargins();tomtomMap.uiSettings.logoView.restoreDefaultMargins()
-
To apply inverted logo colors:
_
tomtomMap.getUiSettings().getLogoView().applyInvertedLogo();tomtomMap.uiSettings.logoView.applyInvertedLogo()
-
To apply default logo colors:
_
tomtomMap.getUiSettings().getLogoView().applyDefaultLogo();tomtomMap.uiSettings.logoView.applyDefaultLogo()
-
To override the default style:
<style name="LogoView" parent="BaseLogoView" >
<item name="android:layout_gravity">bottom|left</item>
<item name="android:layout_margin">@dimen/common_layout_zero_dp</item>
</style>
API Reference
| Older versions | Changes between current version |
|---|---|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
Map ReactX Extensions
Additional classes that allow you to write reactive components using TomtomMap. Specific map callbacks (e.g., map click listener) are transformed to Observables so they can be easily integrated with RxJava2 types. This module does not add any new features to the existing TomtomMap API.
To use this library, add the following dependency to the build.gradle file:
api("com.tomtom.online:sdk-maps-rx-extensions:2.4725")To initialize the Rx wrapper for TomtomMap:
RxTomtomMap rxTomtomMap = new RxTomtomMap(tomtomMap);To subscribe for map click events:
Disposable mapClickDisposable = rxTomtomMap
.getOnMapClickObservable()
.observeOn(mainThread())
.subscribe(latLng -> displayMessage(
R.string.menu_events_on_map_click,
latLng
));API Reference
| Older versions | Changes between current version |
|---|---|
N/A |
|
N/A |
|
N/A |
Map Kotlin Extensions
Additional classes that make development with Kotlin more pleasant and idiomatic. This module does not add any new features to the existing TomtomMap API.
To use this library, add the following dependency to the build.gradle file:
api("com.tomtom.online:sdk-maps-ktx-extensions:2.4725")To apply an operation on the TomtomMap:
inline fun MapFragment.applyOnTomtomMap(noinline block: TomtomMap.() -> Unit) {
getAsyncMap(block)
}To take advantage of coroutines:
suspend inline fun MapFragment.getTomtomMap(): TomtomMap = suspendCoroutine { cont ->
val callback = OnMapReadyCallback { tomtomMap -> cont.resume(tomtomMap) }
getAsyncMap(callback)
}API Reference
| Older versions | Changes between current version |
|---|---|
N/A |
|
N/A |
|
N/A |
Static Map Image
Allow your user to render a user-defined rectangular image containing a map section.
For more details, please visit Static Map Image documentation
Sample use case 1: Your app is designed to use simple map. You do not want to show the entire map, just some part of it to show and mark something simple. You don’t have to download the whole sdk-maps library which is much heavier compared to this library.
To use this library, add the following dependency to the build.gradle file:
api("com.tomtom.online:sdk-maps-static-image:2.4725")Example of displaying a static map:
_
StaticImage.builder(getMapApiKey())
.center(Locations.AMSTERDAM_LOCATION) //use center or boundingBox
.layerBasic() // basic layer is default
.styleMain() // main style is default
.mapSize(512, 512) // default size in px
.png() //png is default
.build()
.downloadInto(staticMap1);StaticImage.builder(mapsApiKey)
.center(Locations.AMSTERDAM)
.zoom(zoomLevel)
.layer(layer)
.style(style)
.mapSize(DEFAULT_DIMENSION_SIZE, DEFAULT_DIMENSION_SIZE)
.png()
.build()
.downloadInto(targetImageView) Sample image retrieved from the static map service. |
|
 Examples of static map images. |
API Reference
| Older versions | Changes between current version |
|---|---|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
|
N/A |
Map Styles Extensions
The TomTom Maps SDK gives you the ability to use either online or offline styles in your mobile application.
IMPORTANT: The Map Display API comes with a built-in offline style, but this approach was deprecated in May 2020. In one year, the offline style will be removed from the package and replaced with an URL to the style from Style Merger.
-
If you choose to use offline styles, they will be imported to your app with the Maps SDK package. Thanks to that, the styles will already be included in your app at download time. The styles are added to the Maps SDK package by default.
-
If you choose to use online styles, they will be downloaded into your application when the map is displayed for the first time. Thanks to that, your mobile app size is smaller at the app’s download time so your app downloadable is lighter. In this case you need to exclude offline styles from the SDK.
Online styles
IMPORTANT: The Map Display API comes with a built-in offline style, but this approach was deprecated in May 2020. In one year, the offline style will be removed from the package and replaced with an URL to the style from Style Merger.
To exclude offline styles from the sdk-maps module, use an exclude declaration when the sdk-maps module is declared as shown in the following code example.
api("com.tomtom.online:sdk-maps:$rootProject.internalVersions.sdk@aar") {
transitive = true
exclude module: 'sdk-maps-styles-extensions'
}When offline styles are excluded, then the online styles should be set up.
You can set up online styles in MapFragment:
<fragment
android:id="@+id/map_fragment"
android:name="com.tomtom.online.sdk.map.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tomtom:customStyleUrl="http://your-server:port/style/example-merged.json" />You can set up online styles in MapView:
<?xml version="1.0" encoding="utf-8"?>
<com.tomtom.online.sdk.map.MapView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tomtom="http://schemas.android.com/apk/res-auto"
android:id="@+id/map_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
tomtom:styleUrl="asset://styles/night.json"
>
</com.tomtom.online.sdk.map.MapView>To use the offline style library, no actions are required because the offline styles are attached to the map by default.
To use the offline style library with your custom map, add the following dependency to the build.gradle file:
implementation("com.tomtom.online:sdk-maps-styles-extensions:2.4725")