Markers shaking

[Nbzh]

Hello,

I have an issue after adding markers : the markers are shaking when zooming

map_try.mp4

tileProvider : https://tile.openstreetmap.org/

adding method :

@Composable
    fun MapScreen(
        modifier: Modifier = Modifier,
        parksViewModel: ParksViewModel = viewModel(),
    ) {
        val searchParks by parksViewModel.fullParksWithStreetlamps.observeAsState()

        LaunchedEffect(searchParks) {
            withContext(Dispatchers.IO) {
                searchParks?.mapMarker(parksViewModel)?.also { markers ->
                    Timber.tag("NewMapTestActivity").d("MapScreen: ${markers.count()}")
                    markers.forEach { marker ->
                        val (x, y) = marker.normalizePosition()
                        parksViewModel.mapState.addMarker(
                            id = marker.id,
                            x = x,
                            y = y,
                            renderingStrategy = RenderingStrategy.Clustering("streetlamps")
                        ) {
                            Marker(marker.icon)
                        }
                    }
                }
            }
        }

        MapUI(modifier = modifier, state = parksViewModel.mapState)
    }

is there a solution ?

Thank you for your help.

[p-lr]

This is due to the map being to big - in this case, this is the whole world. Currently, MapCompose renders everything in a canvas which size equals the map size. When the size is too big, rendering issues such as what you describe start to appear.

However, we hardly ever need a map which covers the entire world. A way the circumvent this issue is to setup a map limited to a restricted area (or even a whole country, or continent).
What is your use case? Do you need the world coverage?

[Nbzh]

I can limit to a continent but I cannot know which contries exactly.. some users can work in France so they will zoom on France, and others ones in USA and few in several countries (but same continent)

In this case (video) I didn't move in outside of Spain and France, so I didn't have other countries tiles.

[Nbzh]

In addition there are a lot of markers. On the video I added 157, but some clients can have several thousand markers (can reach 20000 for the biggest client) but I will not display all at once. I will ask to zoom at least on a city to make them appear

[p-lr]

I suppose your configuration of MapState is close to the example of OsmVM (in the demo app).
Could you try with a lower max level, something like :

private val maxLevel = 16
private val minLevel = 12
private val mapSize = mapSizeAtLevel(maxLevel, tileSize = 256)
val state = MapState(levelCount = maxLevel + 1, mapSize, mapSize, workerCount = 16) {
     minimumScaleMode(Forced((1 / 2.0.pow(maxLevel - minLevel)).toFloat()))
     scroll(0.5064745545387268, 0.3440358340740204)  // Paris
     maxScale(2f)
}.apply {
     addLayer(tileStreamProvider)
}