1- # Example03Markers - Marker Overlays and Click Handling
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, and click event handling .
5+ This example demonstrates the marker system in OpenMapView, including marker rendering, touch detection, info windows, and marker navigation .
66
77## Features Demonstrated
88
9- - Multiple markers at different geographic locations
10- - Default red teardrop marker icons with color variations
11- - Both API styles: Kotlin direct instantiation and Google Maps builder pattern
12- - Marker click detection and callbacks
13- - Toast notifications on marker click
14- - Markers with title and snippet metadata
15- - Marker positioning with proper anchor points
16- - Markers that stay fixed during pan and zoom
17- - Info windows showing marker titles and snippets
9+ - Multiple markers at real Bochum landmark locations
10+ - Default teardrop marker icons with color variations
11+ - Marker click detection and selection tracking
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)
1817
1918## Screenshot
2019
@@ -39,30 +38,75 @@ This example demonstrates the marker system in OpenMapView, including marker ren
3938adb shell am start -n de.afarber.openmapview.example03markers/.MainActivity
4039```
4140
41+ ## Project Structure
42+
43+ ```
44+ example03markers/
45+ ├── MainActivity.kt # Main activity and MapViewScreen composable
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 Bochum POI locations
49+ └── Constants.kt # Colors, dimensions, and durations
50+ ```
51+
4252## Code Highlights
4353
44- ### Adding Markers - Kotlin Style
54+ ### MainActivity.kt
4555
4656``` kotlin
47- OpenMapView (context).apply {
48- setCenter(LatLng (51.4661 , 7.2491 )) // Bochum, Germany
49- setZoom(14.0 )
50-
51- // Kotlin-style direct instantiation
52- addMarker(
53- Marker (
54- position = LatLng (51.4661 , 7.2491 ),
55- title = " Bochum City Center"
56- snippet = " Welcome to Bochum!"
57+ @Composable
58+ fun MapViewScreen () {
59+ val lifecycleOwner = LocalLifecycleOwner .current
60+ var mapView: OpenMapView ? by remember { mutableStateOf(null ) }
61+ var selectedIndex by remember { mutableIntStateOf(0 ) }
62+ var selectedMarker: Marker ? by remember { mutableStateOf(null ) }
63+ var isInfoWindowShown by remember { mutableStateOf(false ) }
64+
65+ Box (modifier = Modifier .fillMaxSize()) {
66+ AndroidView (
67+ factory = { ctx ->
68+ OpenMapView (ctx).apply {
69+ lifecycleOwner.lifecycle.addObserver(this )
70+ setCenter(initialLocation)
71+ setZoom(13.0f )
72+ getUiSettings().infoWindowAutoDismiss = 10 .seconds
73+
74+ setOnMarkerClickListener { marker ->
75+ selectedMarker = marker
76+ isInfoWindowShown = marker.isInfoWindowShown
77+ true
78+ }
79+ setOnInfoWindowCloseListener {
80+ isInfoWindowShown = false
81+ }
82+ mapView = this
83+ }
84+ },
85+ modifier = Modifier .fillMaxSize(),
5786 )
58- )
87+
88+ StatusToolbar (selectedIndex, selectedMarker?.title, cameraState, isInfoWindowShown, .. .)
89+ MarkerToolbar (onPrevClick = { .. . }, onNextClick = { .. . })
90+ }
5991}
6092```
6193
94+ ### Adding Markers - Kotlin Style
95+
96+ ``` kotlin
97+ addMarker(
98+ Marker (
99+ position = LatLng (51.4783 , 7.2231 ),
100+ title = " Bochum Hauptbahnhof"
101+ snippet = " Main railway station"
102+ icon = BitmapDescriptorFactory .defaultMarker(BitmapDescriptorFactory .HUE_RED ),
103+ )
104+ )
105+ ```
106+
62107### Adding Markers - Google Maps Style
63108
64109``` kotlin
65- // Google Maps API builder pattern
66110addMarker(
67111 MarkerOptions ()
68112 .position(LatLng (51.4650 , 7.2500 ))
@@ -72,57 +116,51 @@ addMarker(
72116)
73117```
74118
75- ### Click Listener
119+ ### OSM-Inspired Colors (Constants.kt)
76120
77121``` kotlin
78- setOnMarkerClickListener { marker ->
79- val message = buildString {
80- append(marker.title ? : " Marker"
81- if (marker.snippet != null ) {
82- append(" \n "
83- append(marker.snippet)
84- }
85- }
86- Toast .makeText(context, message, Toast .LENGTH_SHORT ).show()
87- true // Consume the click event
88- }
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
89125```
90126
91127### Key Concepts
92128
93129- ** Marker** : Data class with position, title, snippet, icon, anchor, and tag
94130- ** addMarker()** : Add a marker to the map
95- - ** removeMarker()** : Remove a specific marker
96- - ** clearMarkers()** : Remove all markers
131+ - ** getMarkers()** : Get list of all markers
97132- ** setOnMarkerClickListener()** : Handle marker click events
98- - ** Default icon** : Red teardrop shape generated via MarkerIconFactory
99- - ** Custom icons** : Provide your own Bitmap via the ` icon ` parameter
133+ - ** 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
100136
101137## What to Test
102138
103- 1 . ** Launch the app** - you should see 5 red markers around Bochum
104- 2 . ** Click a marker** - Toast message shows title and snippet
105- 3 . ** Pan the map** - markers stay at correct geographic positions
106- 4 . ** Zoom in/out** - markers remain properly positioned
107- 5 . ** Click different markers** - each shows its own title/snippet
139+ 1 . ** Launch the app** - you should see 6 colored markers at Bochum landmarks
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
146+ 8 . ** Pan/zoom the map** - markers stay at correct geographic positions
108147
109148## Marker Locations
110149
111- This example displays 5 markers:
112-
113- | Location | Coordinates | Description |
114- | -------- | ------------------- | ------------------ |
115- | Center | 51.4661°N, 7.2491°E | Bochum City Center |
116- | North | 51.4700°N, 7.2550°E | North Location |
117- | South | 51.4620°N, 7.2430°E | South Location |
118- | West | 51.4680°N, 7.2380°E | West Location |
119- | East | 51.4640°N, 7.2600°E | East Location |
150+ This example displays 6 markers at notable Bochum landmarks:
120151
121- ** Note on marker positioning:** While the 4 outer markers are placed on N, S, W, E sides of the central marker (by adjusting latitude/longitude), they do not appear strictly above, below, left, right on the screen. This is due to the Web Mercator projection used by OpenStreetMap, which distorts distances and angles, especially at higher latitudes. The further from the equator, the more pronounced this distortion becomes.
152+ | Location | Coordinates | Description |
153+ | ----------------- | ------------------- | -------------------- |
154+ | Hauptbahnhof | 51.4783°N, 7.2231°E | Main railway station |
155+ | Ruhr University | 51.4452°N, 7.2622°E | Ruhr-Universitat |
156+ | Rathaus | 51.4816°N, 7.2166°E | City Hall |
157+ | Bermuda3eck | 51.4807°N, 7.2222°E | Entertainment dist. |
158+ | Bergbau-Museum | 51.4892°N, 7.2174°E | Mining Museum |
159+ | Starlight Express | 51.4649°N, 7.2043°E | Musical theater |
122160
123161## Custom Marker Icons
124162
125- To use custom marker icons instead of the default red teardrop:
163+ To use custom marker icons instead of the default teardrop:
126164
127165``` kotlin
128166// Create custom bitmap (e.g., from resources)
@@ -171,6 +209,6 @@ Click detection uses:
171209
172210## Map Location
173211
174- ** Default Center:** Bochum, Germany ( 51.4661 °N, 7.2491 °E) at zoom 14 .0
212+ ** Default Center:** Calculated from marker positions ( ~ 51.47 °N, 7.22 °E) at zoom 13 .0
175213
176- All 5 markers are positioned around Bochum within ~ 1km radius .
214+ All 6 markers are positioned around Bochum at real landmark locations .
0 commit comments