How to Combine Camera Follow with Zoom Animations in MapLibre?

[MAXBAF1]

Hi, I'm trying to implement a camera behavior where the map follows the user's location smoothly as they move. However, I'm facing a problem when trying to combine this with other camera animations like zooming.

❗ The Problem

If the camera is already animating to follow the user, and I trigger a zoom animation (via a "+" button), the zoom animation is canceled — it never completes. Presumably, this is because a old animation interrupts the new one.

I want the zoom animation to be smooth and not canceled by the ongoing camera-follow animation, and vice versa.

I attempted to implement my own animation system by manually interpolating and updating the camera state (for tracking and zooming simultaneously), but I couldn’t get both animations to work together reliably.

---

🔍 Desired Behavior

• The camera should smoothly follow the user.
• If the user taps a zoom button, the camera should zoom in/out smoothly, even if it’s currently following the user.

---

🧩 Code Example

This is how I currently animate camera position to follow the player:

LaunchedEffect(lastLocation) {
    cameraState.animateTo(
        finalPosition = cameraState.position.copy(
            target = lastLocation.toPosition()
        )
    )
}

And this is how zoom is handled (triggered by "+" button):

cameraState.animateTo(
    finalPosition = cameraState.position.copy(
        zoom = cameraState.position.zoom + MapConstant.ZOOM_LEVEL_DELTA
    )
)

As mentioned, if the camera is in motion (e.g., following position), this zoom animation is silently canceled.

❓ Question

Is there a recommended way in MapLibre to:

• Combine camera animations, e.g., update zoom and position together?

• Or cancel a specific animation (e.g., tracking) when the user manually interacts (e.g., zooms or pans)?

• Or handle smooth animation coordination for such user-controlled and programmatic transitions?

[sargunv]

Since you're copying the camera's current position when you animate, you're stopping that camera's movement to its previous position and only animating the new, different, value you passed. Instead you should copy the previous final position to maintain both destinations:

var destination by remember { mutableStateOf(cameraState.position) }

LaunchedEffect(finalPosition) {
	cameraState.animateTo(destination)
}

LaunchedEffect(lastLocation) {
	destination = destination.copy(
		target = lastLocation.toPosition()
	)
}

fun onPressZoomButton() {
	destination = destination.copy(
		zoom = finalPosition.zoom + MapConstant.ZOOM_LEVEL_DELTA
	)
}