layerPositionedContent renders layers in reverse order

[jeffbarge]

Environment

• Android OS version: 14
• Devices affected: Moto 5g
• Maps SDK Version: 11.7.1

Observed behavior and steps to reproduce

When using a Composable function with more than 1 layer, and adding to the map via layerPositionedContent, the first layer added renders on top, which is backwards from when adding the same composable to the mapContent.

Example:

    @Composable
    private fun PolylineBase() {
        val lineSource = rememberGeoJsonSourceState {
            data = GeoJSONData(
                Feature.fromGeometry(
                    LineString.fromLngLats(
                listOf(
                    Point.fromLngLat(0.0, 0.0), Point.fromLngLat(1.0, 1.0))
            )))
        }

        LineLayer(sourceState = lineSource) {
            lineColor = ColorValue(
                Color(0xFF999999)
            )
            lineWidth = DoubleValue(12.0)
            lineBorderWidth = DoubleValue(2.0)
            lineBorderColor = ColorValue(Color(0xFF333333))
        }

        val geoJsonSource = rememberGeoJsonSourceState {
            data = GeoJSONData(Point.fromLngLat(0.0, 0.0))
        }

        SymbolLayer(
            sourceState = geoJsonSource
        ) {
            iconAnchor = IconAnchorValue.BOTTOM
            textField = FormattedValue("Hello Helsinki")
            textColor = ColorValue(Color.Red)
            textColorTransition = Transition(durationMillis = 1000)
            textSize = DoubleValue(20.0)
            textAllowOverlap = BooleanValue(true)
        }
    }

Note that the text from the SymbolLayer renders beneath the LineLayer, even though it was added last.

Expected behavior

The last Layer added should render on top. This is the behavior when adding layers to MapContent.

Notes / preliminary analysis

Additional links and references

[jush]

Thanks for the issue. We'll let you know once we've fixed it.

(internal ticket: MAPSAND-1924)

[pengdev]

Hi @jeffbarge I can not reproduce the issue on my device, can you share the full code snippet with the way you add this composable to the map?

[jeffbarge]

@pengdev

Box {
            MapboxMap(
                style = {
                    GenericStyle(
                        style = Style.OUTDOORS,
                        layerPositionedContent = layerPositionedContent {
                            aboveLayer("building") {
                                PolylineBase()
                            }
                        }
                    )
                },
            ) {
            }
        }

Also I've noticed that the render order of the layers changes as I zoom in and out. See attached video.
Screen_recording_20250113_094542.webm

[jeffbarge]

BTW - it looks to be zoom level 6 where this takes place

[jush]

@jeffbarge This is expected behaviour. See explanation at https://docs.mapbox.com/android/maps/guides/styles/work-with-layers/#rendering-order:

If the Globe projection or Terrain is active, the SDK optimizes performance by batching multiple layers together, which may cause layer rearrangements. Layers draped over the globe and terrain, including fill, line, background, hillshade, and raster, are rendered below symbols, regardless of slot placement or the absence of a designated slot.

This means that layers placed with methods such as addLayerAbove(), addLayerAt(), and addLayerBelow() might not appear at the expected layer position for some layer types. If your layer is not positioned in the expected place, try disabling terrain and changing the map's projection to Mercator.

[jeffbarge]

it's expected that it change as you zoom? If this is the case, it sounds like we simply cannot expect to have a deterministic render order?

[jush]

@jeffbarge I'm reopening it, there might still be an issue with the initial order in the aboveLayer("building") {...} block.

On the other hand, in case you want the line layer on top of the symbol and be deterministic render order then you need to follow the docs recommendation disabling terrain and changing the map's projection to Mercator.