Map UI Extensions

Use default compass, current location buttons, zooming and panning controls built-in Maps SDK.
You can read more on Map UI extensions page.

Sample use case 1: You want to provide your users with compass, current location, panning and zooming controls so they can quickly center the map on their current location, set it to display north at the top of the screen after rotating the map, pan or zoom the map You can use the default controls provided with Maps SDK.

Sample use case 2: You want to provide your users with compass, current location, panning and zooming controls, and you want to use custom icons that are designed for your app style.

Sample use case 3: In some of the screens in your app, you want to remove the compass, current location, panning and zooming controls.

Since all ui elements are fully customizable because the android view’s properties are exposed, changing the
default icons for them is straight forward:

_

ArrowButtonsGroup arrowButtons = tomtomMap.getUiSettings().getPanningControlsView().getView();
arrowButtons.getArrowDownButton().setImageResource(R.drawable.btn_down_custom);
arrowButtons.getArrowUpButton().setImageResource(R.drawable.btn_up_custom);
arrowButtons.getArrowLeftButton().setImageResource(R.drawable.btn_left_custom);
arrowButtons.getArrowRightButton().setImageResource(R.drawable.btn_right_custom);

val arrowButtonGroup: ArrowButtonsGroup = tomtomMap.uiSettings.panningControlsView.getView()
arrowButtonGroup.arrowDownButton.setImageResource(R.drawable.arrow_button_down_custom)
arrowButtonGroup.arrowUpButton.setImageResource(R.drawable.arrow_button_up_custom)
arrowButtonGroup.arrowLeftButton.setImageResource(R.drawable.arrow_button_left_custom)
arrowButtonGroup.arrowRightButton.setImageResource(R.drawable.arrow_button_right_custom)

_

ZoomButtonsGroup zoomButtons = tomtomMap.getUiSettings().getZoomingControlsView().getView();
zoomButtons.getZoomInButton().setImageResource(R.drawable.btn_zoom_in_custom);
zoomButtons.getZoomOutButton().setImageResource(R.drawable.btn_zoom_out_custom);

val zoomButtonsGroup: ZoomButtonsGroup = tomtomMap.uiSettings.zoomingControlsView.getView()
zoomButtonsGroup.zoomInButton.setImageResource(R.drawable.zoom_in_button_custom)
zoomButtonsGroup.zoomOutButton.setImageResource(R.drawable.zoom_out_button_custom)

Default ui extensions controls

Default ui extensions controls - Hidden

Custom ui extensions controls

Map UI Extensions

Map UI Extensions

You are here