Map UI Extensions

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

Sample use case 1: You want to provide your users with the compass, current location, and 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, and pan or zoom the map. You can use the default controls provided with the Maps SDK.

Sample use case 2: You want to provide your users with the 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, and 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