animated layer demo

.gitattributes

@@ -0,0 +1 @@
+demo-app/src/commonMain/composeResources/files/data/* linguist-vendored

demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/DemoApp.kt

@@ -15,12 +15,7 @@ import androidx.navigation.NavHostController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
-import dev.sargunv.maplibrecompose.demoapp.demos.CameraFollowDemo
-import dev.sargunv.maplibrecompose.demoapp.demos.CameraStateDemo
-import dev.sargunv.maplibrecompose.demoapp.demos.ClusteredPointsDemo
-import dev.sargunv.maplibrecompose.demoapp.demos.EdgeToEdgeDemo
-import dev.sargunv.maplibrecompose.demoapp.demos.FrameRateDemo
-import dev.sargunv.maplibrecompose.demoapp.demos.StyleSwitcherDemo
+import dev.sargunv.maplibrecompose.demoapp.demos.*
 import kotlinx.serialization.Serializable
 
 @Composable
@@ -47,14 +42,14 @@ fun DemoApp(navController: NavHostController = rememberNavController()) {
           StyleSwitcherDemo()
         }
       }
-      composable<BasicLayersRoute> {
+      composable<ClusteredPointsRoute> {
         SimpleDemoScaffold("Clustering and interaction", navigateUp = navController::navigateUp) {
           ClusteredPointsDemo()
         }
       }
-      composable<AnimatedPropertiesRoute> {
+      composable<AnimatedLayerRoute> {
         SimpleDemoScaffold("Animated layer", navigateUp = navController::navigateUp) {
-          Text("Animated layer")
+          AnimatedLayerDemo()
         }
       }
       composable<CameraStateRoute> {
@@ -87,12 +82,12 @@ fun DemoApp(navController: NavHostController = rememberNavController()) {
             DemoListItem(
               title = "Clustering and interaction",
               description = "Add points to the map and configure clustering with expressions.",
-              onClick = { navController.navigate(BasicLayersRoute) },
+              onClick = { navController.navigate(ClusteredPointsRoute) },
             )
             DemoListItem(
               title = "Animated layer",
               description = "Change layer properties at runtime.",
-              onClick = { navController.navigate(AnimatedPropertiesRoute) },
+              onClick = { navController.navigate(AnimatedLayerRoute) },
             )
             DemoListItem(
               title = "Camera state",
@@ -134,9 +129,9 @@ fun DemoListItem(title: String, description: String, onClick: () -> Unit) {
 
 @Serializable object StyleSwitcherRoute
 
-@Serializable object BasicLayersRoute
+@Serializable object ClusteredPointsRoute
 
-@Serializable object AnimatedPropertiesRoute
+@Serializable object AnimatedLayerRoute
 
 @Serializable object CameraStateRoute
 

demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/AnimatedLayerDemo.kt

@@ -0,0 +1,60 @@
+package dev.sargunv.maplibrecompose.demoapp.demos
+
+import androidx.compose.animation.animateColor
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.keyframes
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.foundation.layout.Column
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import dev.sargunv.maplibrecompose.compose.MaplibreMap
+import dev.sargunv.maplibrecompose.compose.layer.Anchor
+import dev.sargunv.maplibrecompose.compose.layer.LineLayer
+import dev.sargunv.maplibrecompose.compose.rememberCameraState
+import dev.sargunv.maplibrecompose.compose.source.rememberGeoJsonSource
+import dev.sargunv.maplibrecompose.core.camera.CameraPosition
+import dev.sargunv.maplibrecompose.demoapp.DEFAULT_STYLE
+import dev.sargunv.maplibrecompose.demoapp.generated.Res
+import io.github.dellisd.spatialk.geojson.Position
+import org.jetbrains.compose.resources.ExperimentalResourceApi
+
+private const val ROUTES_FILE = "files/data/amtrak_routes.geojson"
+
+private val US = Position(latitude = 46.336, longitude = -96.205)
+
+@Composable
+@OptIn(ExperimentalResourceApi::class)
+fun AnimatedLayerDemo() = Column {
+  MaplibreMap(
+    modifier = Modifier.weight(1f),
+    styleUrl = DEFAULT_STYLE,
+    cameraState = rememberCameraState(firstPosition = CameraPosition(target = US, zoom = 2.0)),
+  ) {
+    val routeSource = rememberGeoJsonSource(id = "amtrak-routes", dataUrl = Res.getUri(ROUTES_FILE))
+
+    val infiniteTransition = rememberInfiniteTransition()
+    val animatedColor by
+      infiniteTransition.animateColor(
+        Color.hsl(0f, 1f, 0.5f),
+        Color.hsl(0f, 1f, 0.5f),
+        animationSpec =
+          infiniteRepeatable(
+            animation =
+              keyframes {
+                durationMillis = 10000
+                for (i in 1..9) Color.hsl(i * 36f, 1f, 0.5f) at (i * 1000)
+              }
+          ),
+      )
+
+    Anchor.Below("waterway_line_label") {
+      LineLayer(
+        id = "amtrak-routes",
+        source = routeSource,
+        color = const(animatedColor),
+        width = const(4),
+      )
+    }
+  }
+}

demo-app/src/commonMain/kotlin/dev/sargunv/maplibrecompose/demoapp/demos/ClusteredPointsDemo.kt

@@ -27,7 +27,7 @@ import kotlinx.serialization.json.jsonObject
 import kotlinx.serialization.json.jsonPrimitive
 import org.jetbrains.compose.resources.ExperimentalResourceApi
 
-private const val GBFS_FILE = "files/data/gbfs_lime_seattle.json"
+private const val GBFS_FILE = "files/data/lime_seattle.gbfs.json"
 
 private val SEATTLE = Position(latitude = 47.607, longitude = -122.342)