diff --git a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt index c0a449ae..918cc21f 100644 --- a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt +++ b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt @@ -1,5 +1,6 @@ package dev.sargunv.maplibrecompose.demoapp +import androidx.compose.animation.AnimatedContentTransitionScope import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.rememberScrollState @@ -25,7 +26,16 @@ import kotlinx.serialization.Serializable @Composable fun DemoApp(navController: NavHostController = rememberNavController()) { MaterialTheme { - NavHost(navController = navController, startDestination = StartRoute) { + NavHost( + navController = navController, + startDestination = StartRoute, + enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start) }, + exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start) }, + popEnterTransition = { + slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.End) + }, + popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End) }, + ) { composable { DemoScaffold("Edge-to-edge", alpha = 0.5f, navigateUp = navController::navigateUp) { innerPadding -> @@ -38,18 +48,13 @@ fun DemoApp(navController: NavHostController = rememberNavController()) { } } composable { - SimpleDemoScaffold("Clustered points", navigateUp = navController::navigateUp) { + SimpleDemoScaffold("Clustering and interaction", navigateUp = navController::navigateUp) { ClusteredPointsDemo() } } composable { - SimpleDemoScaffold("Animated properties", navigateUp = navController::navigateUp) { - Text("Animated properties") - } - } - composable { - SimpleDemoScaffold("Interaction", navigateUp = navController::navigateUp) { - Text("Interaction") + SimpleDemoScaffold("Animated layer", navigateUp = navController::navigateUp) { + Text("Animated layer") } } composable { @@ -80,20 +85,15 @@ fun DemoApp(navController: NavHostController = rememberNavController()) { onClick = { navController.navigate(StyleSwitcherRoute) }, ) DemoListItem( - title = "Clustered points", + title = "Clustering and interaction", description = "Add points to the map and configure clustering with expressions.", onClick = { navController.navigate(BasicLayersRoute) }, ) DemoListItem( - title = "Animated properties", + title = "Animated layer", description = "Change layer properties at runtime.", onClick = { navController.navigate(AnimatedPropertiesRoute) }, ) - DemoListItem( - title = "Interaction", - description = "Detect taps on the map and the features under them.", - onClick = { navController.navigate(InteractionRoute) }, - ) DemoListItem( title = "Camera state", description = "Read camera position as state.", @@ -138,8 +138,6 @@ fun DemoListItem(title: String, description: String, onClick: () -> Unit) { @Serializable object AnimatedPropertiesRoute -@Serializable object InteractionRoute - @Serializable object CameraStateRoute @Serializable object CameraFollowRoute diff --git a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt index ea1abec8..fa3f3e90 100644 --- a/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt +++ b/demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt @@ -2,12 +2,7 @@ package dev.sargunv.maplibrecompose.demoapp.demos import androidx.compose.foundation.layout.Column import androidx.compose.material3.MaterialTheme -import androidx.compose.runtime.Composable -import androidx.compose.runtime.LaunchedEffect -import androidx.compose.runtime.State -import androidx.compose.runtime.getValue -import androidx.compose.runtime.mutableStateOf -import androidx.compose.runtime.remember +import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import dev.sargunv.maplibrecompose.compose.MaplibreMap @@ -23,6 +18,7 @@ import io.github.dellisd.spatialk.geojson.Feature import io.github.dellisd.spatialk.geojson.FeatureCollection import io.github.dellisd.spatialk.geojson.Point import io.github.dellisd.spatialk.geojson.Position +import kotlinx.coroutines.launch import kotlinx.serialization.json.Json import kotlinx.serialization.json.JsonNull import kotlinx.serialization.json.double @@ -39,11 +35,11 @@ private val LIME_GREEN = Color(50, 205, 5) @Composable fun ClusteredPointsDemo() = Column { - MaplibreMap( - modifier = Modifier.weight(1f), - styleUrl = DEFAULT_STYLE, - cameraState = rememberCameraState(firstPosition = CameraPosition(target = SEATTLE, zoom = 10.0)), - ) { + val cameraState = + rememberCameraState(firstPosition = CameraPosition(target = SEATTLE, zoom = 10.0)) + val coroutineScope = rememberCoroutineScope() + + MaplibreMap(modifier = Modifier.weight(1f), styleUrl = DEFAULT_STYLE, cameraState = cameraState) { val gbfsData by rememberGbfsFeatureState(GBFS_FILE) val bikeSource = @@ -69,6 +65,18 @@ fun ClusteredPointsDemo() = Column { 1000 to const(50), 5000 to const(60), ), + onClick = { features -> + features.firstOrNull()?.geometry?.let { + coroutineScope.launch { + cameraState.animateTo( + cameraState.position.copy( + target = (it as Point).coordinates, + zoom = cameraState.position.zoom + 1, + ) + ) + } + } + }, ) SymbolLayer(