Cómo Mostrar Fotos en Marcadores de Ubicación en Mapas con Jetpack Compose

Want to improve the visual interaction of your maps in Jetpack Compose? Here you will learn how to add GUI components to display photos taken from the camera on markers placed on dynamic maps. This class guides you step-by-step to integrate visual dialogs and image galleries that appear when you click on specific points on the map.

How to add new 'Intents' to the ViewModel?

The first action is to add new intents within the TrackingIntent to facilitate user interaction. These actions are simple but fundamental:

• SelectLocation: when selecting a marker in the location, displays a dialog with saved photos.
• DismissDialog: closes the open dialog when clicked.

These intents update the location and correctly handle the appearance or disappearance of the dialog with associated pictures.

What is the "SelectedLocation" status used for?

The SelectedLocation variable is updated when interacting with a location containing pictures, allowing the appropriate dialog to be displayed. This state manages the information displayed for the selected location.

How to implement a custom marker(FotoCluster)?

The section called FotoCluster is key to visually represent how many photos are associated with a point:

• A composable is added that receives a location with lists of photos.
• For each location a small badge is created indicating the number of images present.
• If there is an available and valid photo, the first image in this group is transformed into an attractive visual circular marker using the AsImageBitmap extension function. If it does not exist, it displays a default icon.

How to integrate the photogallery (PhotoGallery) into markers?

To display images in a user-friendly way, the PhotoGallery section is created:

• Use HorizontalPager that allows you to swipe between saved photos.
• By clicking on an individual image, it expands in a specific dialog for detailed viewing.
• Every visual interaction is simple and efficient.

This composable substantially improves the user experience when browsing multiple images in each location.

What happens when you interact with the markers on the map?

When you click on a marker, a dialog immediately pops up showing all saved images. During this interaction:

• Tracking is paused momentarily.
• The photos taken are associated with the exact place where they were captured.
• When closing the dialog, tracking continues normally.

Finally, when restarting the application, any previous record of markers and photos is deleted. However, we mention the possibility of solving this situation by means of so-called "background services", a topic that will be covered in future sections of the course.

We invite you to explore this integration and propose improvements for our bookmarks and visual galleries!