wip: map snapshotter

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

@@ -46,6 +46,7 @@ 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.MarkersDemo
+import dev.sargunv.maplibrecompose.demoapp.demos.SnapshotterDemo
 import dev.sargunv.maplibrecompose.demoapp.demos.StyleSwitcherDemo
 import dev.sargunv.maplibrecompose.material3.controls.AttributionButton
 import dev.sargunv.maplibrecompose.material3.controls.DisappearingCompassButton
@@ -62,6 +63,7 @@ private val DEMOS = buildList {
   if (!Platform.isDesktop) add(CameraStateDemo)
   if (Platform.usesMaplibreNative) add(CameraFollowDemo)
   if (!Platform.isDesktop) add(FrameRateDemo)
+  if (Platform.supportsSnapshotter) add(SnapshotterDemo)
 }
 
 @Composable

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

@@ -0,0 +1,152 @@
+package dev.sargunv.maplibrecompose.demoapp.demos
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import androidx.lifecycle.Lifecycle
+import androidx.lifecycle.LifecycleEventObserver
+import androidx.lifecycle.compose.LocalLifecycleOwner
+import dev.sargunv.maplibrecompose.compose.CameraState
+import dev.sargunv.maplibrecompose.compose.MaplibreMap
+import dev.sargunv.maplibrecompose.compose.rememberCameraState
+import dev.sargunv.maplibrecompose.compose.rememberStyleState
+import dev.sargunv.maplibrecompose.core.SnapshotException
+import dev.sargunv.maplibrecompose.demoapp.ALL_STYLES
+import dev.sargunv.maplibrecompose.demoapp.DEFAULT_STYLE
+import dev.sargunv.maplibrecompose.demoapp.Demo
+import dev.sargunv.maplibrecompose.demoapp.DemoMapControls
+import dev.sargunv.maplibrecompose.demoapp.DemoOrnamentSettings
+import dev.sargunv.maplibrecompose.demoapp.DemoScaffold
+import kotlin.coroutines.cancellation.CancellationException
+import kotlinx.coroutines.Job
+import kotlinx.coroutines.launch
+
+object SnapshotterDemo : Demo {
+  override val name = "Snapshotter"
+  override val description = "Take a snapshot of the map"
+
+  @Composable
+  override fun Component(navigateUp: () -> Unit) {
+    val cameraState = rememberCameraState()
+    val styleState = rememberStyleState()
+    val isLoading = remember { mutableStateOf(false) }
+    val snapshot = remember { mutableStateOf<ImageBitmap?>(null) }
+    val lifeCycleOwner = LocalLifecycleOwner.current
+
+    DisposableEffect(lifeCycleOwner) {
+      val observer = LifecycleEventObserver { _, event ->
+        if (event == Lifecycle.Event.ON_PAUSE) {
+          isLoading.value = false
+        }
+      }
+      lifeCycleOwner.lifecycle.addObserver(observer)
+      onDispose { lifeCycleOwner.lifecycle.removeObserver(observer) }
+    }
+
+    DemoScaffold(this, navigateUp) {
+      Column {
+        Box(modifier = Modifier.weight(1f)) {
+          MaplibreMap(
+            styleUri = DEFAULT_STYLE,
+            cameraState = cameraState,
+            styleState = styleState,
+            ornamentSettings = DemoOrnamentSettings(),
+          )
+          DemoMapControls(cameraState, styleState)
+
+          if (isLoading.value) {
+            CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
+          }
+        }
+
+        SnapshotterControls(cameraState, isLoading, snapshot)
+
+        snapshot.value?.let {
+          SnapshotDialog(snapshot = it, onDismissRequest = { snapshot.value = null })
+        }
+      }
+    }
+  }
+
+  @Composable
+  private fun SnapshotterControls(
+    cameraState: CameraState,
+    isLoading: MutableState<Boolean>,
+    snapshot: MutableState<ImageBitmap?>,
+  ) {
+    val scope = rememberCoroutineScope()
+    var snapshotJob by remember { mutableStateOf<Job?>(null) }
+
+    Row(
+      modifier = Modifier.padding(16.dp).fillMaxWidth(),
+      horizontalArrangement = Arrangement.SpaceEvenly,
+    ) {
+      Button(
+        onClick = {
+          snapshotJob =
+            scope.launch {
+              isLoading.value = true
+              try {
+                val response =
+                  cameraState.snapshot(
+                    width = 500.dp,
+                    height = 500.dp,
+                    styleUri = DEFAULT_STYLE,
+                    cameraPosition = cameraState.position,
+                  )
+
+                snapshot.value = response
+              } catch (error: SnapshotException) {
+                println("Error during snapshot generation: ${error.message}")
+              } catch (error: CancellationException) {
+                println("Snapshot generation cancelled")
+              }
+
+              isLoading.value = false
+              snapshotJob = null
+            }
+        }
+      ) {
+        Text("Take snapshot")
+      }
+      Button(enabled = snapshotJob != null, onClick = { snapshotJob?.cancel() }) {
+        Text("Cancel snapshot")
+      }
+    }
+  }
+
+  @Composable
+  fun SnapshotDialog(snapshot: ImageBitmap, onDismissRequest: () -> Unit) {
+    Dialog(onDismissRequest = { onDismissRequest() }) {
+      Card(modifier = Modifier.padding(16.dp), shape = RoundedCornerShape(16.dp)) {
+        Image(
+          modifier = Modifier.padding(16.dp),
+          bitmap = snapshot,
+          contentDescription = "Snapshot",
+        )
+      }
+    }
+  }
+}

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

@@ -90,5 +90,8 @@ val Platform.supportsLayers: Boolean
 val Platform.supportsBlending: Boolean
   get() = isAndroid || isIos
 
+val Platform.supportsSnapshotter: Boolean
+  get() = isAndroid || isIos
+
 val Platform.usesMaplibreNative: Boolean
   get() = isAndroid || isIos

lib/maplibre-compose/src/androidMain/kotlin/dev/sargunv/maplibrecompose/compose/AndroidMapView.kt

@@ -12,6 +12,7 @@ import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.viewinterop.AndroidView
 import co.touchlab.kermit.Logger
 import dev.sargunv.maplibrecompose.core.AndroidMap
+import dev.sargunv.maplibrecompose.core.AndroidMapSnapshotter
 import dev.sargunv.maplibrecompose.core.AndroidScaleBar
 import dev.sargunv.maplibrecompose.core.MaplibreMap
 import org.maplibre.android.MapLibre
@@ -68,6 +69,7 @@ internal fun AndroidMapView(
               mapView = mapView,
               map = map,
               scaleBar = AndroidScaleBar(context, mapView, map),
+              mapSnapshotter = AndroidMapSnapshotter(context, layoutDir, density),
               layoutDir = layoutDir,
               density = density,
               callbacks = callbacks,

lib/maplibre-compose/src/androidMain/kotlin/dev/sargunv/maplibrecompose/core/AndroidMap.kt

@@ -12,9 +12,11 @@ import androidx.compose.ui.unit.dp
 import co.touchlab.kermit.Logger
 import dev.sargunv.maplibrecompose.core.util.correctedAndroidUri
 import dev.sargunv.maplibrecompose.core.util.toBoundingBox
+import dev.sargunv.maplibrecompose.core.util.toCameraPosition
 import dev.sargunv.maplibrecompose.core.util.toGravity
 import dev.sargunv.maplibrecompose.core.util.toLatLng
 import dev.sargunv.maplibrecompose.core.util.toLatLngBounds
+import dev.sargunv.maplibrecompose.core.util.toMLNCameraPosition
 import dev.sargunv.maplibrecompose.core.util.toMLNExpression
 import dev.sargunv.maplibrecompose.core.util.toOffset
 import dev.sargunv.maplibrecompose.core.util.toPointF
@@ -30,7 +32,6 @@ import kotlin.coroutines.resume
 import kotlin.coroutines.suspendCoroutine
 import kotlin.time.Duration
 import kotlin.time.DurationUnit
-import org.maplibre.android.camera.CameraPosition as MLNCameraPosition
 import org.maplibre.android.camera.CameraUpdateFactory
 import org.maplibre.android.geometry.VisibleRegion as MLNVisibleRegion
 import org.maplibre.android.gestures.MoveGestureDetector
@@ -52,6 +53,7 @@ internal class AndroidMap(
   private val mapView: MapView,
   private val map: MapLibreMap,
   private val scaleBar: AndroidScaleBar,
+  private val mapSnapshotter: AndroidMapSnapshotter,
   layoutDir: LayoutDirection,
   density: Density,
   internal var callbacks: MaplibreMap.Callbacks,
@@ -253,45 +255,14 @@ internal class AndroidMap(
     }
   }
 
-  private fun MLNCameraPosition.toCameraPosition(): CameraPosition =
-    CameraPosition(
-      target = target?.toPosition() ?: Position(0.0, 0.0),
-      zoom = zoom,
-      bearing = bearing,
-      tilt = tilt,
-      padding =
-        padding?.let {
-          PaddingValues.Absolute(
-            left = it[0].dp,
-            top = it[1].dp,
-            right = it[2].dp,
-            bottom = it[3].dp,
-          )
-        } ?: PaddingValues.Absolute(0.dp),
-    )
-
-  private fun CameraPosition.toMLNCameraPosition(): MLNCameraPosition =
-    with(density) {
-      MLNCameraPosition.Builder()
-        .target(target.toLatLng())
-        .zoom(zoom)
-        .tilt(tilt)
-        .bearing(bearing)
-        .padding(
-          left = padding.calculateLeftPadding(layoutDir).toPx().toDouble(),
-          top = padding.calculateTopPadding().toPx().toDouble(),
-          right = padding.calculateRightPadding(layoutDir).toPx().toDouble(),
-          bottom = padding.calculateBottomPadding().toPx().toDouble(),
-        )
-        .build()
-    }
-
   override fun getCameraPosition(): CameraPosition {
-    return map.cameraPosition.toCameraPosition()
+    return map.cameraPosition.toCameraPosition(density)
   }
 
   override fun setCameraPosition(cameraPosition: CameraPosition) {
-    map.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition.toMLNCameraPosition()))
+    map.moveCamera(
+      CameraUpdateFactory.newCameraPosition(cameraPosition.toMLNCameraPosition(density, layoutDir))
+    )
   }
 
   private class CancelableCoroutineCallback(private val cont: Continuation<Unit>) :
@@ -304,7 +275,9 @@ internal class AndroidMap(
   override suspend fun animateCameraPosition(finalPosition: CameraPosition, duration: Duration) =
     suspendCoroutine { cont ->
       map.animateCamera(
-        CameraUpdateFactory.newCameraPosition(finalPosition.toMLNCameraPosition()),
+        CameraUpdateFactory.newCameraPosition(
+          finalPosition.toMLNCameraPosition(density, layoutDir)
+        ),
         duration.toInt(DurationUnit.MILLISECONDS),
         CancelableCoroutineCallback(cont),
       )
@@ -366,6 +339,8 @@ internal class AndroidMap(
 
   override fun metersPerDpAtLatitude(latitude: Double) =
     map.projection.getMetersPerPixelAtLatitude(latitude)
+
+  override fun getMapSnapshotter() = mapSnapshotter
 }
 
 private fun MLNVisibleRegion.toVisibleRegion() =

lib/maplibre-compose/src/androidMain/kotlin/dev/sargunv/maplibrecompose/core/AndroidMapSnapshotter.kt

@@ -0,0 +1,52 @@
+package dev.sargunv.maplibrecompose.core
+
+import android.content.Context
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.LayoutDirection
+import dev.sargunv.maplibrecompose.core.util.correctedAndroidUri
+import dev.sargunv.maplibrecompose.core.util.toLatLngBounds
+import dev.sargunv.maplibrecompose.core.util.toMLNCameraPosition
+import io.github.dellisd.spatialk.geojson.BoundingBox
+import kotlin.coroutines.resume
+import kotlinx.coroutines.suspendCancellableCoroutine
+import org.maplibre.android.maps.Style
+import kotlin.coroutines.resumeWithException
+import org.maplibre.android.snapshotter.MapSnapshotter as MLNMapSnapshotter
+
+internal class AndroidMapSnapshotter(
+  private val context: Context,
+  private val layoutDir: LayoutDirection,
+  private val density: Density,
+) : MapSnapshotter {
+
+  override suspend fun snapshot(
+    width: Dp,
+    height: Dp,
+    styleUri: String,
+    region: BoundingBox?,
+    cameraPosition: CameraPosition?,
+    showLogo: Boolean,
+  ): ImageBitmap {
+    with(density) {
+      val styleBuilder = Style.Builder().fromUri(styleUri.correctedAndroidUri())
+      val options =
+        MLNMapSnapshotter.Options(width.roundToPx(), height.roundToPx())
+          .withStyleBuilder(styleBuilder)
+          .withRegion(region?.toLatLngBounds())
+          .withCameraPosition(cameraPosition?.toMLNCameraPosition(this, layoutDir))
+          .withLogo(showLogo)
+
+      val snapshotter = MLNMapSnapshotter(context, options)
+
+      return suspendCancellableCoroutine { cont ->
+        snapshotter.start({ snapshot -> cont.resume(snapshot.bitmap.asImageBitmap()) }) { error ->
+          cont.resumeWithException(SnapshotException(error))
+        }
+        cont.invokeOnCancellation { snapshotter.cancel() }
+      }
+    }
+  }
+}