Scaling issue on some devices (Vulkan)

[mtpdog]

MapLibre Android Version

11.7.0-vulkan

Android SDK Version

Android 10

Device

Samsung Galaxy M52

What happened?

There is an issue with map scaling on some devices with Vulkan renderer.

Vulkan (1st device)
https://github.com/user-attachments/assets/4d53fea3-9b26-47f7-874b-ac879ab55757

Vulkan (2nd device)
https://github.com/user-attachments/assets/2dae086e-79eb-4f3b-b20e-5b08a2883603

OpenGL (1st device)
https://github.com/user-attachments/assets/9d4c1641-02ab-4b04-9615-b35d52198a3a

Steps to reproduce

Here is an example code:

@Composable
fun MaplibreScalableMap() {
    val map = rememberMapView()

    LaunchedEffect(Unit) {
        val maplibreMap = map.awaitMap()
        maplibreMap.setStyle("mapbox://styles/mapbox/satellite-v9")
    }

    // State to track current map size
    var currentMapSize by remember { mutableStateOf(MapSizeNew.QUARTER) }

    // Define constraint sets for different map sizes
    val quarterConstraints = ConstraintSet {
        val mapRef = createRefFor("map")
        val buttonsRef = createRefFor("buttons")

        constrain(mapRef) {
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            width = Dimension.percent(0.5f)
            height = Dimension.percent(0.25f)
        }

        constrain(buttonsRef) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    }

    val halfConstraints = ConstraintSet {
        val mapRef = createRefFor("map")
        val buttonsRef = createRefFor("buttons")

        constrain(mapRef) {
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            width = Dimension.percent(0.5f)
            height = Dimension.percent(0.5f)
        }

        constrain(buttonsRef) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    }

    val fullConstraints = ConstraintSet {
        val mapRef = createRefFor("map")
        val buttonsRef = createRefFor("buttons")

        constrain(mapRef) {
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            height = Dimension.fillToConstraints
        }

        constrain(buttonsRef) {
            top.linkTo(parent.top, margin = 16.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }
    }

    // Select the appropriate constraint set based on current size
    val constraints = when (currentMapSize) {
        MapSizeNew.QUARTER -> quarterConstraints
        MapSizeNew.HALF -> halfConstraints
        MapSizeNew.FULL -> fullConstraints
    }

    ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.Blue)
        ,
        animateChangesSpec = TweenSpec(),
        optimizationLevel = Optimizer.OPTIMIZATION_STANDARD,
        constraintSet = constraints
    ) {
        Box(modifier = Modifier
            .clip(RoundedCornerShape(8.dp))
            .layoutId("map")){
            AndroidView(modifier = Modifier.fillMaxSize(),
                factory = { map })
        }


        // Control Buttons
        Row(modifier = Modifier.layoutId("buttons")) {
            Button(
                onClick = {
                    currentMapSize = when (currentMapSize) {
                        MapSizeNew.QUARTER -> MapSizeNew.HALF
                        MapSizeNew.HALF -> MapSizeNew.FULL
                        MapSizeNew.FULL -> MapSizeNew.QUARTER
                    }
                }
            ) {
                Text("Scale Map")
            }

            Spacer(modifier = Modifier.width(8.dp))

            Button(
                onClick = {
                    // Reset to quarter size
                    currentMapSize = MapSizeNew.QUARTER
                }
            ) {
                Text("Reset Size")
            }
        }
    }
}

@Composable
fun rememberMapView(): MapView {
    val context = LocalContext.current

    MapLibre.getInstance(context, MAPBOX_API, WellKnownTileServer.Mapbox)
    MapLibre.setConnected(true)

    val mapView = remember { MapView(context, MapLibreMapOptions
        .createFromAttributes(context)
        .foregroundLoadColor(Color.Red.toArgb())
    ) }
    val lifecycle = LocalLifecycleOwner.current.lifecycle

    DisposableEffect(lifecycle, mapView) {
        val lifecycleObserver = getMapLifecycleObserver(mapView)
        lifecycle.addObserver(lifecycleObserver)
        onDispose {
            lifecycle.removeObserver(lifecycleObserver)
        }
    }

    return mapView
}

enum class MapSizeNew {
    QUARTER, HALF, FULL
}

Renderer

Vulkan

Relevant log output

Additional context

No response

[louwers]

Thanks for the detailed bug report. 🙏

I hope @adrian-cojocaru can take a look at this next year.

[westnordost]

Video 1 and Video 3 seem to be not accessible.

[louwers]

@westnordost Try again, works here.