Implement map type switch button

gradle/libs.versions.toml

@@ -72,6 +72,7 @@ compose-ui = { module = "androidx.compose.ui:ui" }
 compose-ui-viewbinding = { module = "androidx.compose.ui:ui-viewbinding" }
 compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
 compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
+compose-material-extended-icons = { module = "androidx.compose.material:material-icons-extended" }
 
 #Material
 material = { group = "com.google.android.material", name = "material", version.ref = "material" }
@@ -87,7 +88,7 @@ extension-mapbox-compose = { module = "com.mapbox.extension:maps-compose", versi
 
 #Google Map
 googlemap-compose = { module = "com.google.maps.android:maps-compose", version.ref = "googleMap" }
-googlemap-playservice= { module = "com.google.android.gms:play-services-maps", version.ref = "googleMapPlayService" }
+googlemap-playservice = { module = "com.google.android.gms:play-services-maps", version.ref = "googleMapPlayService" }
 googlemap-utils = { module = "com.google.maps.android:android-maps-utils", version.ref = "googleMapUtils" }
 
 #What3words Library
@@ -99,6 +100,6 @@ android-library = { id = "com.android.library", version.ref = "androidGradlePlug
 gradle-ktlint = { id = "org.jlleitschuh.gradle.ktlint", version.ref = "gradleKtlint" }
 autonomousapps-analysis = { id = "com.autonomousapps.dependency-analysis", version.ref = "autonomousappsAnalysis" }
 kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
-dokka = { id = "org.jetbrains.dokka" , version.ref = "dokka"}
+dokka = { id = "org.jetbrains.dokka", version.ref = "dokka" }
 maven-publish = { id = "maven-publish" }
 signing = { id = "signing" }

lib-compose/build.gradle.kts

@@ -85,6 +85,7 @@ dependencies {
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.compose.material3)
     implementation(libs.compose.ui)
+    implementation(libs.compose.material.extended.icons)
     implementation(libs.compose.ui.viewbinding)
     debugImplementation(libs.compose.ui.tooling)
     implementation(libs.compose.ui.tooling.preview)

lib-compose/src/main/java/com/what3words/components/compose/maps/W3WMapComponent.kt

@@ -55,20 +55,20 @@ fun W3WMapComponent(
                 onMapTypeClicked = {
 //                    mapManager.setMyLocationButton(!state.isMyLocationEnabled)
 //                    mapManager.setDarkMode(!state.isDarkMode)
-                    mapManager.setCameraPosition(
-                        cameraPosition = W3WMapState.CameraPosition(
-                            zoom = 19f,
-                            W3WCoordinates(10.782147, 106.671892),
-                            50f,
-                            true
-                        )
-                    )
-
-//                    if (mapManager.getMapType() == W3WMapState.MapType.HYBRID) {
-//                        mapManager.setMapType(W3WMapState.MapType.TERRAIN)
-//                    } else {
-//                        mapManager.setMapType(W3WMapState.MapType.HYBRID)
-//                    }
+//                    mapManager.setCameraPosition(
+//                        cameraPosition = W3WMapState.CameraPosition(
+//                            zoom = 19f,
+//                            W3WCoordinates(10.782147, 106.671892),
+//                            50f,
+//                            true
+//                        )
+//                    )
+
+                    if (mapManager.getMapType() == W3WMapState.MapType.NORMAL) {
+                        mapManager.setMapType(W3WMapState.MapType.SATELLITE)
+                    } else {
+                        mapManager.setMapType(W3WMapState.MapType.NORMAL)
+                    }
                 },
                 onMapClicked = {
 
@@ -125,7 +125,7 @@ fun W3WMapContent(
     state: W3WMapState,
     mapProvider: MapProvider,
     content: (@Composable () -> Unit)? = null,
-    onMapTypeClicked: (() -> Unit),
+    onMapTypeClicked: ((W3WMapState.MapType) -> Unit),
     onMapClicked: ((W3WCoordinates) -> Unit),
     onCameraUpdated: ((W3WMapState.CameraPosition) -> Unit)
 ) {

lib-compose/src/main/java/com/what3words/components/compose/maps/buttons/W3WMapButtons.kt

@@ -8,24 +8,27 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.LocationSearching
-import androidx.compose.material.icons.filled.Map
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import com.what3words.components.compose.maps.W3WMapState
+import com.what3words.components.compose.maps.buttons.mapswitch.W3WMapSwitchButton
 
 @Composable
 fun W3WMapButtons(
     modifier: Modifier = Modifier,
     onMyLocationClicked: (() -> Unit),
-    onMapTypeClicked: (() -> Unit),
+    onMapTypeClicked: ((W3WMapState.MapType) -> Unit),
 ) {
     Column(
         modifier = modifier,
-        verticalArrangement = Arrangement.spacedBy(20.dp)
+        verticalArrangement = Arrangement.spacedBy(20.dp),
+        horizontalAlignment = Alignment.End
     ) {
         OutlinedButton(
             onClick = { onMyLocationClicked.invoke() },
@@ -38,15 +41,8 @@ fun W3WMapButtons(
             Icon(Icons.Default.LocationSearching, contentDescription = "content description")
         }
 
-        OutlinedButton(
-            onClick = { onMapTypeClicked.invoke() },
-            modifier = Modifier.size(50.dp),
-            shape = CircleShape,
-            border = BorderStroke(1.dp, Color.Blue),
-            contentPadding = PaddingValues(0.dp),
-            colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Blue)
-        ) {
-            Icon(Icons.Default.Map, contentDescription = "content description")
+        W3WMapSwitchButton {
+            onMapTypeClicked(it)
         }
     }
 }

lib-compose/src/main/java/com/what3words/components/compose/maps/buttons/mapswitch/W3WMapSwitchButton.kt

@@ -0,0 +1,72 @@
+package com.what3words.components.compose.maps.buttons.mapswitch
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.IconButton
+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.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.what3words.components.compose.maps.W3WMapState
+import com.what3words.map.components.compose.R
+
+/**
+ * A button component for switching between different map types.
+ * Only supports [W3WMapState.MapType.NORMAL] and [W3WMapState.MapType.SATELLITE].
+ *
+ * @param modifier The modifier for the button.
+ * @param w3wMapType The current map type.
+ * @param onMapTypeChange The callback function to be invoked when the map type is changed.
+ */
+@Composable
+fun W3WMapSwitchButton(
+    modifier: Modifier = Modifier,
+    w3wMapType: W3WMapState.MapType = W3WMapState.MapType.NORMAL,
+    onMapTypeChange: (W3WMapState.MapType) -> Unit
+) {
+    var mapType by remember { mutableStateOf(w3wMapType) }
+    IconButton(
+        modifier = modifier
+            .shadow(elevation = 3.dp, shape = CircleShape)
+            .size(50.dp),
+        onClick = {
+            onMapTypeChange(mapType)
+            mapType = when (mapType) {
+                W3WMapState.MapType.NORMAL -> W3WMapState.MapType.SATELLITE
+                W3WMapState.MapType.SATELLITE -> W3WMapState.MapType.NORMAL
+                else -> W3WMapState.MapType.NORMAL // Default to NORMAL
+            }
+        }
+    ) {
+        Image(
+            painter = painterResource(
+                id = when (mapType) {
+                    W3WMapState.MapType.NORMAL -> R.drawable.ic_map_satellite
+                    W3WMapState.MapType.SATELLITE -> R.drawable.ic_map_normal
+                    else -> R.drawable.ic_map_satellite
+                }
+            ),
+            contentDescription = null, // TODO: Add content description later
+        )
+    }
+}
+
+@Preview
+@Composable
+fun MapNormalPreview() {
+    W3WMapSwitchButton(w3wMapType = W3WMapState.MapType.NORMAL) {}
+}
+
+@Preview
+@Composable
+fun MapTypeSwitcherPreview() {
+    W3WMapSwitchButton(w3wMapType = W3WMapState.MapType.SATELLITE) {}
+}