Improve Example02Zoom with reusable toolbar components (#11)

* Improve over zoom effect and the example 2

* Draw a red quadrilateral

* Calculate the average point

* Draw a smaller quadrilateral

* Use average in example 1 too

Author: afarber

examples/Example01Pan/screenshot.gif

@@ -68,18 +68,23 @@ class MainActivity : ComponentActivity() {
 fun MapViewScreen() {
     val lifecycleOwner = androidx.lifecycle.compose.LocalLifecycleOwner.current
 
-    // Preset locations around Bochum city, Germany
-    val initialLocation = LatLng(51.4661, 7.2491)
-    val location1 = LatLng(51.4700, 7.2400) // North-West
-    val location2 = LatLng(51.4620, 7.2600) // East
-    val location3 = LatLng(51.4550, 7.2350) // South-West
-
     // Bochum area bounds for constraint demo
     val bochumBounds = LatLngBounds(
         southwest = LatLng(51.4400, 7.1800),
         northeast = LatLng(51.5000, 7.3200),
     )
 
+    // Initial location: center of the bounds
+    val initialLocation = LatLng(
+        (bochumBounds.southwest.latitude + bochumBounds.northeast.latitude) / 2,
+        (bochumBounds.southwest.longitude + bochumBounds.northeast.longitude) / 2,
+    )
+
+    // Preset locations around Bochum city, Germany
+    val location1 = LatLng(51.4700, 7.2400) // North-West
+    val location2 = LatLng(51.4620, 7.2600) // East
+    val location3 = LatLng(51.4550, 7.2350) // South-West
+
     // State variables
     var mapView: OpenMapView? by remember { mutableStateOf(null) }
     var cameraState by remember { mutableStateOf("Idle") }

examples/Example01Pan/src/main/kotlin/de/afarber/openmapview/example01pan/MainActivity.kt

@@ -2,15 +2,15 @@
 
 [Back to README](../../README.md)
 
-This example demonstrates zoom functionality in OpenMapView, including both programmatic zoom controls and pinch-to-zoom gestures.
+This example demonstrates zoom functionality in OpenMapView, including custom zoom controls and pinch-to-zoom gestures with real-time status display.
 
 ## Features Demonstrated
 
 - Map tile rendering with zoom support
-- Floating Action Button (FAB) zoom controls (+/-)
+- Custom zoom toolbar with +/- buttons
 - Pinch-to-zoom gesture detection
 - Real-time zoom level display
-- Smooth zoom animations
+- Camera state tracking (Idle/Moving)
 - Zoom limits (min: 2.0, max: 19.0)
 
 ## Screenshot
@@ -36,53 +36,70 @@ This example demonstrates zoom functionality in OpenMapView, including both prog
 adb shell am start -n de.afarber.openmapview.example02zoom/.MainActivity
 ```
 
+## Project Structure
+
+```
+example02zoom/
+├── MainActivity.kt      # Main activity and MapViewScreen composable
+├── ZoomToolbar.kt       # Vertical toolbar with +/- zoom buttons
+├── StatusToolbar.kt     # Status overlay showing zoom level and camera state
+└── Colors.kt            # OSM-inspired colors and shared dimensions
+```
+
 ## Code Highlights
 
-### MainActivity.kt - FAB Zoom Controls
+### MainActivity.kt
 
 ```kotlin
-// Zoom In FAB
-FloatingActionButton(
-    onClick = {
-        mapView?.apply {
-            val newZoom = (getZoom() + 1.0).coerceAtMost(19.0)
-            setZoom(newZoom)
-            zoomLevel = getZoom()
-        }
+@Composable
+fun MapViewScreen() {
+    val lifecycleOwner = LocalLifecycleOwner.current
+    var mapView: OpenMapView? by remember { mutableStateOf(null) }
+    var zoomLevel by remember { mutableStateOf("14.0") }
+
+    Box(modifier = Modifier.fillMaxSize()) {
+        AndroidView(
+            factory = { ctx ->
+                OpenMapView(ctx).apply {
+                    lifecycleOwner.lifecycle.addObserver(this)
+                    setCenter(LatLng(51.4661, 7.2491)) // Bochum, Germany
+                    setZoom(14.0f)
+                    mapView = this
+                }
+            },
+            modifier = Modifier.fillMaxSize(),
+        )
+
+        StatusToolbar(zoomLevel = zoomLevel, cameraState = cameraState, ...)
+        ZoomToolbar(onZoomInClick = { ... }, onZoomOutClick = { ... }, ...)
     }
-) {
-    Icon(Icons.Default.Add, "Zoom In")
 }
 ```
 
-### Zoom Level Display
+### OSM-Inspired Colors (Colors.kt)
 
 ```kotlin
-// Real-time zoom level indicator
-Text(
-    text = "Zoom: %.1f".format(zoomLevel),
-    modifier = Modifier
-        .align(Alignment.BottomStart)
-        .padding(16.dp)
-        .background(Color.White.copy(alpha = 0.8f))
-)
+val OsmParkGreen = Color(0xFFAAD3A2)   // Parks and forests
+val OsmHighwayPink = Color(0xFFE892A2)  // Highways and roads
+val OsmWaterBlue = Color(0xFFAAD3DF)    // Water areas
 ```
 
 ### Key Concepts
 
-- **setZoom()**: Programmatically set zoom level (2.0-19.0)
-- **getZoom()**: Read current zoom level
+- **setZoom()**: Sets zoom level (2.0 = world view, 19.0 = street level)
+- **getZoom()**: Returns current zoom level
 - **Pinch gesture**: Built-in ScaleGestureDetector in OpenMapView
 - **Zoom limits**: Automatically enforced to prevent over-zoom
+- **OnCameraMoveListener**: Callback for camera changes during zoom
 
 ## What to Test
 
-1. **Click the + button** - map should zoom in, counter updates
-2. **Click the - button** - map should zoom out, counter updates
-3. **Pinch to zoom** - use two fingers to zoom in/out
-4. **Check zoom focus** - pinch-to-zoom should zoom toward pinch center
-5. **Test limits** - zooming beyond min/max should stop gracefully
-6. **Observe zoom level** - bottom-left display updates in real-time
+1. **Tap + button** to zoom in, observe zoom level update
+2. **Tap - button** to zoom out, observe zoom level update
+3. **Pinch to zoom** using two fingers
+4. **Check zoom focus** - pinch-to-zoom zooms toward pinch center
+5. **Test limits** - zooming beyond min/max stops at the limit
+6. **Observe status** - zoom level and camera state update in real-time
 
 ## Technical Details
 
@@ -99,9 +116,9 @@ Text(
 OpenMapView uses:
 
 - `ScaleGestureDetector` for pinch-to-zoom
-- Fractional zoom (Double) for smooth transitions
+- Fractional zoom (Float) for smooth transitions
 - Web Mercator projection for tile calculation
 
 ## Map Location
 
-**Default Center:** Berlin, Germany (52.52°N, 13.405°E) at zoom 14.0
+**Default Center:** Bochum, Germany (51.4661N, 7.2491E) at zoom 14.0

examples/Example02Zoom/README.md

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2025 Alexander Farber
+ * SPDX-License-Identifier: MIT
+ *
+ * This file is part of the OpenMapView project (https://github.com/afarber/OpenMapView)
+ */
+
+package de.afarber.openmapview.example02zoom
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+/**
+ * OSM-inspired colors and shared dimensions for the Example02Zoom app.
+ */
+
+/** Green color used by OpenStreetMap for parks and forests. */
+val OsmParkGreen = Color(0xFFAAD3A2)
+
+/** Pink color used by OpenStreetMap for highways and major roads. */
+val OsmHighwayPink = Color(0xFFE892A2)
+
+/** Blue color used by OpenStreetMap for water areas (lakes, rivers). */
+val OsmWaterBlue = Color(0xFFAAD3DF)
+
+/** Shared corner radius for all toolbar components (matches Material3 FAB). */
+val ToolbarCornerRadius = 16.dp

examples/Example02Zoom/screenshot.gif

@@ -13,23 +13,38 @@ import androidx.activity.compose.setContent
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.LocationSearching
+import androidx.compose.material3.FloatingActionButton
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import de.afarber.openmapview.CameraUpdateFactory
 import de.afarber.openmapview.LatLng
+import de.afarber.openmapview.OnCameraMoveStartedListener
 import de.afarber.openmapview.OpenMapView
-import kotlin.math.roundToInt
+import de.afarber.openmapview.Polyline
 
+/**
+ * Main activity demonstrating OpenMapView zoom controls.
+ *
+ * This example showcases:
+ * - Custom zoom toolbar with +/- buttons
+ * - Pinch-to-zoom gesture support
+ * - Real-time zoom level display
+ * - Camera state tracking
+ */
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -46,48 +61,127 @@ class MainActivity : ComponentActivity() {
     }
 }
 
+/**
+ * Main composable screen containing the map and zoom controls.
+ *
+ * Displays an OpenMapView with a status toolbar showing zoom level and camera state,
+ * and a zoom toolbar for programmatic zoom control.
+ * The map is centered on Bochum, Germany.
+ */
 @Composable
 fun MapViewScreen() {
-    val context = LocalContext.current
-    val lifecycleOwner = androidx.lifecycle.compose.LocalLifecycleOwner.current
-    var zoomLevel by remember { mutableStateOf(14.0f) }
+    val lifecycleOwner = LocalLifecycleOwner.current
+
+    // Irregular quadrilateral around Bochum (not a rectangle)
+    val bochumCorners = listOf(
+        LatLng(51.4873, 7.2050), // North-West
+        LatLng(51.4764, 7.2159), // South-West
+        LatLng(51.4824, 7.2290), // South-East
+        LatLng(51.4890, 7.2166), // North-East
+    )
+
+    // Initial location: center of the quadrilateral
+    val initialLocation = LatLng(
+        bochumCorners.map { it.latitude }.average(),
+        bochumCorners.map { it.longitude }.average(),
+    )
+    val initialZoom = 14.0f
+
+    val bochumOutline = Polyline(
+        points = bochumCorners + bochumCorners.first(), // Close the shape
+        strokeColor = Color.Red,
+        strokeWidth = 4f,
+    )
+
+    // State variables
     var mapView: OpenMapView? by remember { mutableStateOf(null) }
+    var zoomLevel by remember { mutableStateOf("%.1f".format(initialZoom)) }
+    var cameraState by remember { mutableStateOf("Idle") }
 
     Box(modifier = Modifier.fillMaxSize()) {
+        // Map view
         AndroidView(
             factory = { ctx ->
                 OpenMapView(ctx).apply {
-                    // Register lifecycle observer for proper cleanup
                     lifecycleOwner.lifecycle.addObserver(this)
 
-                    setCenter(LatLng(51.4661, 7.2491)) // Bochum, Germany
-                    setZoom(14.0f)
-                    mapView = this
+                    setCenter(initialLocation)
+                    setZoom(initialZoom)
+
+                    // Add the red polyline outline
+                    addPolyline(bochumOutline)
 
-                    // Enable built-in zoom controls
-                    getUiSettings().isZoomControlsEnabled = true
+                    // Camera move started listener
+                    setOnCameraMoveStartedListener { reason ->
+                        cameraState = when (reason) {
+                            OnCameraMoveStartedListener.REASON_GESTURE -> "Moving (gesture)"
+                            OnCameraMoveStartedListener.REASON_API_ANIMATION -> "Moving (animation)"
+                            OnCameraMoveStartedListener.REASON_DEVELOPER_ANIMATION -> "Moving (programmatic)"
+                            else -> "Moving"
+                        }
+                    }
 
-                    // Add camera move listener to update zoom label
+                    // Camera move listener - updates zoom level during movement
                     setOnCameraMoveListener {
-                        zoomLevel = getZoom()
+                        zoomLevel = "%.1f".format(getZoom())
+                    }
+
+                    // Camera idle listener
+                    setOnCameraIdleListener {
+                        cameraState = "Idle"
+                        zoomLevel = "%.1f".format(getZoom())
                     }
+
+                    mapView = this
                 }
             },
             modifier = Modifier.fillMaxSize(),
         )
 
-        // Zoom level title at the top
-        Surface(
+        // Status overlay at top
+        StatusToolbar(
+            zoomLevel = zoomLevel,
+            cameraState = cameraState,
             modifier = Modifier
                 .align(Alignment.TopCenter)
-                .padding(top = 16.dp),
-            color = MaterialTheme.colorScheme.surface.copy(alpha = 0.9f),
-            shape = MaterialTheme.shapes.small,
+                .padding(16.dp),
+        )
+
+        // Zoom toolbar at bottom
+        ZoomToolbar(
+            onZoomInClick = {
+                mapView?.apply {
+                    setZoom(getZoom() + 1.0f)
+                    zoomLevel = "%.1f".format(getZoom())
+                }
+            },
+            onZoomOutClick = {
+                mapView?.apply {
+                    setZoom(getZoom() - 1.0f)
+                    zoomLevel = "%.1f".format(getZoom())
+                }
+            },
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 16.dp),
+        )
+
+        FloatingActionButton(
+            onClick = {
+                mapView?.animateCamera(
+                    CameraUpdateFactory.newLatLngZoom(initialLocation, initialZoom),
+                    500,
+                )
+            },
+            containerColor = OsmHighwayPink,
+            contentColor = Color.Black,
+            modifier = Modifier
+                .align(Alignment.BottomEnd)
+                .padding(16.dp),
         ) {
-            Text(
-                text = "Zoom: ${zoomLevel.roundToInt()}",
-                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
-                style = MaterialTheme.typography.titleMedium,
+            Icon(
+                imageVector = Icons.Default.LocationSearching,
+                contentDescription = "Reset",
             )
         }
     }