1- # Example03Markers - Marker Overlays and Interactive Management
1+ # Example03Markers - Marker Navigation and Info Windows
22
33[ Back to README] ( ../../README.md )
44
5- This example demonstrates the marker system in OpenMapView, including marker rendering, touch detection, info windows, and interactive marker management .
5+ This example demonstrates the marker system in OpenMapView, including marker rendering, touch detection, info windows, and marker navigation .
66
77## Features Demonstrated
88
99- Multiple markers at real Bochum landmark locations
1010- Default teardrop marker icons with color variations
11- - Both API styles: Kotlin direct instantiation and Google Maps builder pattern
1211- Marker click detection and selection tracking
13- - Info windows showing marker titles and snippets
14- - Interactive marker management (add, remove, clear)
15- - Real-time status display (marker count, selection, camera state)
16- - Reset functionality to restore initial state
12+ - Info windows showing marker titles and snippets with auto-dismiss
13+ - Navigation between markers with prev/next buttons
14+ - Info window toggle via FAB or marker tap
15+ - Real-time status display (selection index, camera state)
16+ - Visual feedback when info window is shown (red text)
1717
1818## Screenshot
1919
@@ -43,8 +43,9 @@ adb shell am start -n de.afarber.openmapview.example03markers/.MainActivity
4343```
4444example03markers/
4545├── MainActivity.kt # Main activity and MapViewScreen composable
46- ├── MarkerToolbar.kt # Horizontal toolbar with add/remove/clear buttons
47- ├── StatusToolbar.kt # Status overlay showing marker count and selection
46+ ├── MarkerToolbar.kt # Horizontal toolbar with prev/next navigation buttons
47+ ├── StatusToolbar.kt # Status overlay showing selection index and camera state
48+ ├── MarkerData.kt # Marker data class and initial Bochum locations
4849└── Colors.kt # OSM-inspired colors and shared dimensions
4950```
5051
@@ -57,8 +58,9 @@ example03markers/
5758fun MapViewScreen () {
5859 val lifecycleOwner = LocalLifecycleOwner .current
5960 var mapView: OpenMapView ? by remember { mutableStateOf(null ) }
60- var markerCount by remember { mutableIntStateOf(6 ) }
61+ var selectedIndex by remember { mutableIntStateOf(0 ) }
6162 var selectedMarker: Marker ? by remember { mutableStateOf(null ) }
63+ var isInfoWindowShown by remember { mutableStateOf(false ) }
6264
6365 Box (modifier = Modifier .fillMaxSize()) {
6466 AndroidView (
@@ -67,19 +69,24 @@ fun MapViewScreen() {
6769 lifecycleOwner.lifecycle.addObserver(this )
6870 setCenter(initialLocation)
6971 setZoom(13.0f )
72+ getUiSettings().infoWindowAutoDismiss = 10 .seconds
7073
7174 setOnMarkerClickListener { marker ->
7275 selectedMarker = marker
76+ isInfoWindowShown = marker.isInfoWindowShown
7377 true
7478 }
79+ setOnInfoWindowCloseListener {
80+ isInfoWindowShown = false
81+ }
7582 mapView = this
7683 }
7784 },
7885 modifier = Modifier .fillMaxSize(),
7986 )
8087
81- StatusToolbar (markerCount = markerCount, selectedMarkerTitle = selectedMarker?.title, .. .)
82- MarkerToolbar (onAddClick = { .. . }, onRemoveClick = { .. . }, onClearClick = { .. . })
88+ StatusToolbar (selectedIndex, selectedMarker?.title, cameraState, isInfoWindowShown , .. .)
89+ MarkerToolbar (onPrevClick = { .. . }, onNextClick = { .. . })
8390 }
8491}
8592```
@@ -112,30 +119,30 @@ addMarker(
112119### OSM-Inspired Colors (Colors.kt)
113120
114121``` kotlin
115- val OsmParkGreen = Color (0xFFAAD3A2 ) // Add button
116- val OsmHighwayPink = Color (0xFFE892A2 ) // Remove button, Reset FAB
117- val OsmWaterBlue = Color (0xFFAAD3DF ) // Clear button
122+ val OsmParkGreen = Color (0xFFAAD3A2 ) // Navigation buttons (prev/next)
123+ val OsmHighwayPink = Color (0xFFE892A2 ) // Info window toggle FAB
124+ val OsmWaterBlue = Color (0xFFAAD3DF ) // Reserved for future use
118125```
119126
120127### Key Concepts
121128
122129- ** Marker** : Data class with position, title, snippet, icon, anchor, and tag
123130- ** addMarker()** : Add a marker to the map
124- - ** removeMarker()** : Remove a specific marker
125- - ** clearMarkers()** : Remove all markers
126131- ** getMarkers()** : Get list of all markers
127132- ** setOnMarkerClickListener()** : Handle marker click events
128133- ** setOnInfoWindowClickListener()** : Handle info window click events
134+ - ** setOnInfoWindowCloseListener()** : Handle info window close events (manual or auto-dismiss)
135+ - ** infoWindowAutoDismiss** : Auto-dismiss info windows after a duration
129136
130137## What to Test
131138
1321391 . ** Launch the app** - you should see 6 colored markers at Bochum landmarks
133- 2 . ** Tap a marker** - info window shows title and snippet, status shows selection
134- 3 . ** Tap info window ** - toast message confirms the click
135- 4 . ** Tap + button ** - adds new marker at map center
136- 5 . ** Tap - button ** - removes currently selected marker
137- 6 . ** Tap trash button ** - clears all markers
138- 7 . ** Tap reset FAB ** - restores initial markers and camera position
140+ 2 . ** Tap a marker** - info window shows title and snippet, status text turns red
141+ 3 . ** Tap the same marker again ** - info window closes, status text turns black
142+ 4 . ** Tap info window ** - toast message confirms the click
143+ 5 . ** Tap prev/next buttons ** - navigate between markers with camera animation
144+ 6 . ** Tap the FAB ** - toggles info window on selected marker
145+ 7 . ** Wait 10 seconds ** - info window auto-dismisses, status text turns black
1391468 . ** Pan/zoom the map** - markers stay at correct geographic positions
140147
141148## Marker Locations
0 commit comments