Implement mapView.setMapDesign() function. (#59)

* TempSave

* TempSave3

* Resolve merge conflicts.

* WIP: GroundImage bounds change detection in progress.

* WIP: GroundImage rendered; modification handling not yet done.

* Add support for swapping GroundImage (Google Maps API GroundOverlay) image on touch event

* Impliment edit opacity slider'.

* update README.md

* Changes groundImageState.opacity following the slider value

* Initial implementation of GroundImage (GroundOverlay). NE and SW markers are not yet linked with bounds, but committing as instructed.

* WIP: GroundImage feature implementation. Known issue: recomposition does not occur, committing current state.

* Fix: GroundImage does not update by following markers

* Fix: GeoRectBounds.extend is incorrect

* Update: Marker labels based on the relative positions

* Prepared initial implementation setup of MapDesignType for Google Maps API.

* Prepared initial implementation setup of MapDesignType for Google Maps API.

* Resolve conflicts and add MapDesign demo with Google Maps SDK.

* Add MapDesign change demo for Google Maps API and initial Here Map support with list display (WIP).

* feat(here): add MapDesign support for HereMap with runtime style switching.

* feat(Mapbox): add MapDesign support for Mapbox with runtime style switching.

* feat(ArcGIS): add MapDesign support for ArcGIS with runtime style switching.

* Refactor MapDesign selection UI: replace button controls with dropdown list.

* Refactor: update variable names to match dropdown list usage.

* Update MapDesign list handling to show all available designs instead of a sample subset.

* Refactor: move design data definition out of onMapViewChanged() and decouple from list display.

* Refactored code based on review feedback.(1st)

* Refactored code based on review feedback.(2nd)

* Refactored code based on review feedback.(3rd)

* Refactored code based on review feedback.(4th)

---------

Co-authored-by: Masashi Katsumata <wf9a5m75@gmail.com>

Author: KouTsukigase

README.md

@@ -24,8 +24,8 @@ KtLintに従います。ローカルで実行する場合は、下記コマン
 | Map             | ☑    | ☑ | ☑ | ☑       |
 | Marker          | ☑    | ☑ | ☑ | ☑       |
 | Circle          | ☑    | ☑ | ☐ | ☐ (wip) |
-| Polyline        | ☐    | ☐ | ☐ | ☐ |
-| Polygon         | ☐    | ☐ | ☐ | ☐ |
-| GroundOverlay   | ☐    | ☐ | ☐ | ☐ |
-| RasterTileLayer | ☐    | ☐ | ☐ | ☐ |
-| VectorTileLayer | ☐    | ☐ | ☐ | ☐ |
+| Polyline        | ☑    | ☑ | ☑ | ☑       |
+| Polygon         | ☐    | ☐ | ☐ | ☐       |
+| GroundOverlay   | ☐    | ☐ | ☐ | ☐       |
+| RasterTileLayer | ☐    | ☐ | ☐ | ☐       |
+| VectorTileLayer | ☐    | ☐ | ☐ | ☐       |

example-app/src/main/java/com/mapconductor/example/DemoAppScreen.kt

@@ -3,7 +3,9 @@ package com.mapconductor.example
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Build
 import androidx.compose.material.icons.filled.CheckCircle
+import androidx.compose.material.icons.filled.Favorite
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material3.Text
@@ -17,8 +19,11 @@ import androidx.core.content.ContextCompat
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.mapconductor.example.navigation.NavigationViewModel
 import com.mapconductor.example.pages.circle.CircleMapPage
+import com.mapconductor.example.pages.groundimage.GroundImageMapPage
+import com.mapconductor.example.pages.groundimage.GroundImageResources
 import com.mapconductor.example.pages.map.flyto.FlyToMapIcons
 import com.mapconductor.example.pages.map.flyto.FlyToMapPage
+import com.mapconductor.example.pages.mapDesign.MapDesignMapPage
 import com.mapconductor.example.pages.polyline.PolylineMapPage
 import com.mapconductor.example.pages.stores.StoreMapPage
 import com.mapconductor.example.ui.sidebar.Sidebar
@@ -42,6 +47,14 @@ fun DemoAppScreen() {
             )
         }
 
+    val groundImageResources =
+        remember {
+            GroundImageResources(
+                image = ContextCompat.getDrawable(context, R.drawable.newark_nj_1922_0)!!,
+                clickedImage = ContextCompat.getDrawable(context, R.drawable.newark_nj_1922_1)!!,
+            )
+        }
+
     val sidebarItems =
         listOf(
             SidebarItem(
@@ -62,12 +75,24 @@ fun DemoAppScreen() {
                 icon = Icons.Default.CheckCircle,
                 route = "circle",
             ),
+            SidebarItem(
+                id = "groundImage",
+                title = "GroundImage",
+                icon = Icons.Default.Favorite,
+                route = "groundImage",
+            ),
             SidebarItem(
                 id = "polyline",
                 title = "Polyline ",
                 icon = Icons.Default.PlayArrow,
                 route = "polyline",
             ),
+            SidebarItem(
+                id = "mapDesign",
+                title = "MapDesign Demo",
+                icon = Icons.Default.Build,
+                route = "mapDesign",
+            ),
 //            SidebarItem(
 //                id = "examples",
 //                title = "Map Examples",
@@ -108,6 +133,17 @@ fun DemoAppScreen() {
                             onToggleSidebar = navigationViewModel::toggleSidebar,
                         )
                     }
+                    "groundImage" -> {
+                        GroundImageMapPage(
+                            groundImageResources = groundImageResources,
+                            onToggleSidebar = navigationViewModel::toggleSidebar,
+                        )
+                    }
+                    "mapDesign" -> {
+                        MapDesignMapPage(
+                            onToggleSidebar = navigationViewModel::toggleSidebar,
+                        )
+                    }
                     "settings" -> {
                         // Placeholder for settings page
                         Box(

example-app/src/main/java/com/mapconductor/example/MapViewContainer.kt

@@ -6,6 +6,7 @@ import com.mapconductor.arcgis.ArcGISMapView
 import com.mapconductor.arcgis.ArcGISMapViewState
 import com.mapconductor.core.MapViewScope
 import com.mapconductor.core.circle.OnCircleEventHandler
+import com.mapconductor.core.groundimage.OnGroundImageEventHandler
 import com.mapconductor.core.map.MapViewState
 import com.mapconductor.core.map.OnMapEventHandler
 import com.mapconductor.core.marker.OnMarkerEventHandler
@@ -30,6 +31,7 @@ fun MapViewContainer(
     onMarkerAnimateEnd: OnMarkerEventHandler? = null,
     onCircleClick: OnCircleEventHandler? = null,
     onPolylineClick: OnPolylineEventHandler? = null,
+    onGroundImageClick: OnGroundImageEventHandler? = null,
     content: @Composable MapViewScope.() -> Unit,
 ) {
     when (state) {
@@ -46,6 +48,7 @@ fun MapViewContainer(
                 onMarkerAnimateEnd = onMarkerAnimateEnd,
                 onCircleClick = onCircleClick,
                 onPolylineClick = onPolylineClick,
+                onGroundImageClick = onGroundImageClick,
                 content = content,
             )
 
@@ -60,6 +63,7 @@ fun MapViewContainer(
                 onMarkerDragEnd = onMarkerDragEnd,
                 onMarkerAnimateStart = onMarkerAnimateStart,
                 onMarkerAnimateEnd = onMarkerAnimateEnd,
+                onGroundImageClick = onGroundImageClick,
                 onCircleClick = onCircleClick,
                 onPolylineClick = onPolylineClick,
                 content = content,
@@ -78,6 +82,7 @@ fun MapViewContainer(
                 onMarkerAnimateEnd = onMarkerAnimateEnd,
                 onCircleClick = onCircleClick,
                 onPolylineClick = onPolylineClick,
+                onGroundImageClick = onGroundImageClick,
                 content = content,
             )
 
@@ -93,6 +98,7 @@ fun MapViewContainer(
                 onMarkerAnimateStart = onMarkerAnimateStart,
                 onMarkerAnimateEnd = onMarkerAnimateEnd,
                 onCircleClick = onCircleClick,
+                onGroundImageClick = onGroundImageClick,
                 onPolylineClick = onPolylineClick,
                 content = content,
             )

example-app/src/main/java/com/mapconductor/example/navigation/NavigationViewModel.kt

@@ -5,7 +5,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.lifecycle.ViewModel
 
 class NavigationViewModel : ViewModel() {
-    private val _currentPage = mutableStateOf("flyTo")
+    private val _currentPage = mutableStateOf("groundImage")
     val currentPage: State<String> = _currentPage
 
     private val _isSidebarExpanded = mutableStateOf(false)

example-app/src/main/java/com/mapconductor/example/pages/circle/CircleMapComponent.kt

@@ -31,9 +31,7 @@ fun CircleMapComponent(
             onMarkerDrag = onMarkerDrag,
         ) {
             // Circle
-            key(viewModel.circleState.id) {
-                Circle(viewModel.circleState)
-            }
+            Circle(viewModel.circleState)
 
             // Center marker (not draggable)
             key(viewModel.centerMarker.id) {

example-app/src/main/java/com/mapconductor/example/pages/groundimage/GroundImageMapComponent.kt

@@ -0,0 +1,36 @@
+package com.mapconductor.example.pages.groundimage
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.mapconductor.core.groundimage.GroundImage
+import com.mapconductor.core.groundimage.OnGroundImageEventHandler
+import com.mapconductor.core.map.MapViewState
+import com.mapconductor.core.marker.Marker
+import com.mapconductor.core.marker.OnMarkerEventHandler
+import com.mapconductor.example.MapViewContainer
+
+@Composable
+fun GroundImageMapComponent(
+    mapViewState: MapViewState<*>?,
+    viewModel: GroundImageMapPageViewModel,
+    modifier: Modifier = Modifier,
+    onGroundImageClick: OnGroundImageEventHandler = {},
+    onMarkerDrag: OnMarkerEventHandler = {},
+) {
+    mapViewState?.let { mapViewState ->
+        MapViewContainer(
+            modifier = modifier,
+            state = mapViewState,
+            onGroundImageClick = onGroundImageClick,
+            onMarkerDrag = onMarkerDrag,
+        ) {
+            // GroundImage
+            GroundImage(viewModel.groundImageState)
+
+            // BoundsMarkers
+            viewModel.markers.forEach { marker ->
+                Marker(marker)
+            }
+        }
+    }
+}

example-app/src/main/java/com/mapconductor/example/pages/groundimage/GroundImageMapPage.kt

@@ -0,0 +1,95 @@
+package com.mapconductor.example.pages.groundimage
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.ViewModelProvider
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.mapconductor.example.toast.ToastHost
+import com.mapconductor.example.ui.DemoMapPageScaffold
+import com.mapconductor.example.ui.MessageCard
+
+@Composable
+fun GroundImageMapPage(
+    groundImageResources: GroundImageResources,
+    onToggleSidebar: () -> Unit = {},
+) {
+    val viewModel: GroundImageMapPageViewModel =
+        viewModel<GroundImageMapPageViewModelImpl>(
+            factory =
+                object : ViewModelProvider.Factory {
+                    override fun <T : ViewModel> create(modelClass: Class<T>): T {
+                        if (modelClass.isAssignableFrom(GroundImageMapPageViewModelImpl::class.java)) {
+                            @Suppress("UNCHECKED_CAST")
+                            return GroundImageMapPageViewModelImpl(groundImageResources) as T
+                        }
+                        throw IllegalArgumentException("Unknown ViewModel class")
+                    }
+                },
+        )
+
+    DemoMapPageScaffold(
+        initCameraPosition = viewModel.initCameraPosition,
+        onToggleSidebar = onToggleSidebar,
+        onMapViewStateChanged = viewModel::onMapViewChanged,
+    ) { paddingValues ->
+        val mapViewState = viewModel.mapViewState.collectAsState()
+
+        GroundImageMapComponent(
+            mapViewState = mapViewState.value,
+            viewModel = viewModel,
+            onGroundImageClick = viewModel::onGroundImageClick,
+            onMarkerDrag = viewModel::onMarkerDrag,
+        )
+
+        // Message Card
+        MessageCard(
+            modifier =
+                Modifier
+                    .align(Alignment.BottomStart)
+                    .padding(
+                        bottom = paddingValues.calculateBottomPadding() + 16.dp,
+                        start = paddingValues.calculateStartPadding(LayoutDirection.Ltr) + 16.dp,
+                        end = paddingValues.calculateEndPadding(LayoutDirection.Ltr) + 16.dp,
+                    ),
+            title = "Messages",
+        ) {
+            Column {
+                Text("opacity: ${"%.2f".format(viewModel.opacity)}", color = Color.Black)
+                Slider(
+                    value = viewModel.opacity,
+                    onValueChange = { newValue ->
+                        viewModel.opacity = newValue
+                    },
+                    valueRange = 0.0f..1.0f, // スライダー範囲
+                    steps = 0,
+                    colors =
+                        SliderDefaults.colors(
+                            thumbColor = Color.Black, // つまみの色
+                            activeTrackColor = Color.DarkGray, // 値までのトラック
+                            inactiveTrackColor = Color.LightGray, // 残りのトラック
+                            activeTickColor = Color.Black, // 有効ステップの目盛り
+                            inactiveTickColor = Color.White, // 無効ステップの目盛り
+                        ),
+                )
+            }
+        }
+
+        ToastHost(
+            messages = viewModel.messages.collectAsState().value,
+            onDismiss = { viewModel.removeToast(it) },
+        )
+    }
+}