The Map Display Compose module seamlessly embeds a TomTom map into a Jetpack Compose UI. It facilitates adding markers, controlling map interactions, and manipulating the camera position.

Project setup

Remember to configure your project to support Jetpack Compose by following the official Jetpack Compose setup guide.

Configure the project as described in the Project setup guide. In order to set up the dependencies for this module, you configure the init module dependency as outlined in the Navigation SDK initialization project setup section and then follow the Showing the map guide to set up the compose dependency.

Composable map

The Map Display Compose module offers several composable-first components and interfaces to interact with the map in a Jetpack Compose environment.

Key components:

• TomTomMap - A composable container for displaying the map.
• MapViewState - A hoistable state object used to initialize and control the map.
• MapDisplayInfrastructure - Configures the infrastructure utilized by the map.

TomTomMap provides several optional callbacks to handle map interactions and lifecycle events:

• onMapReady - Called when the map is ready to be used.
• onMapClick - Called when the user taps on the map. Receives a GeoPoint.
• onMapLongClick - Called when the user long-presses the map. Receives a GeoPoint.
• onMapDoubleClickListener - Called when the user double-taps the map. Receives a GeoPoint.
• onMapPanningListener - Called whenever the map is panned by the user.

Adding a map

For a complete walkthrough of initializing the SDK and displaying a map, refer to the Displaying Your First Map guide.

Next steps

Since you have learned how to do some of the basics, here are recommendations for the next steps:

• Migration guide
• Configuring the map
• Styling the map