How to enable clustering feature using custom view annotation on mapbox android?

[alexviet]

i have a trouble about enable clustering feature on mapbox v10 android. I have tried to reseach on homepage but didn't find any helpful way to resolve this. I used to create point annotation manager from AnnotationPlugin before then i can add annotationConfig into them but now i must create custom view instead.

So i don't know how to add clustering for that. Here is way to add custom annotation view into mapview.

val point = fromLngLat(
    longitude,
    latitude
)
val view = mMapView.viewAnnotationManager.addViewAnnotation(
         R.layout.custom_layout,
         viewAnnotationOptions {
              geometry(point)
              allowOverlap(true)
         }
)

Anyone help me please? Thanks

[ank27]

@alexviet if you are looking for clusteringOptions using PointAnnotations, maybe this example might help https://github.com/mapbox/mapbox-maps-android/blob/main/app/src/main/java/com/mapbox/maps/testapp/examples/markersandcallouts/PointAnnotationClusterActivity.kt#L62-L72

[alexviet]

@ank27 Yep i used it before, it worked but for old requirement. As i told that i must add custom view instead create point annotation. So i can't use this way :( Can you give me another way?

[ank27]

@alexviet Yes you can defenitely add ViewAnnotations with PointAnnotations, see the example here https://github.com/mapbox/mapbox-maps-android/blob/main/app/src/main/java/com/mapbox/maps/testapp/examples/markersandcallouts/ViewAnnotationWithPointAnnotationActivity.kt. At the time of pointAnnotationManager, you can specify config that takes cluster property.

Hope this helps.

[alexviet]

Hi @ank27 , I have tried your code but i don't see any method to add ViewAnnotations into point annotations. You code simply perform add a custom viewAnnotation and add a point annotation with coordinates POINT. All i want to add a lot of custom viewAnnotation as annotation then enable clustering like https://github.com/mapbox/mapbox-maps-android/blob/main/app/src/main/java/com/mapbox/maps/testapp/examples/markersandcallouts/PointAnnotationClusterActivity.kt#L62-L72. Sorry if i miss understood your meaning.

[boronov]

Any progress ?

[tlipov]

Any progress on this issue?

[trifagabriel]

@ank27 you made my day by redirecting me to that github example. I was researching and trying to implement clustering inside my app for two days now. Not all heroes wear caps. Thanks!!!!

[michal-bogucki]

Have you managed to add clustering with custom points? It works in iOS, but I can't implement it on Android. Some points are created as clusters, but not all and when a cluster is created, sometimes a point falls into it but also remains as a free view on the map

listPoint.map { mapPoint ->
            val jsonString = gson.toJson(mapPoint)
            val pointAnnotationOptions = PointAnnotationOptions().withPoint(mapPoint.point)
                .withData(JsonParser.parseString(jsonString))
            pointAnnotationOptionsList.add(pointAnnotationOptions)
        }

val annotationConfig = AnnotationConfig(
        annotationSourceOptions = AnnotationSourceOptions(
            clusterOptions = ClusterOptions(
                circleRadius = 24.0,
                colorLevels = listOf(Pair(0, Blue500.toArgb())),
                clusterMaxZoom = 15
            )
        )
    )

AndroidView(
            factory = {
                MapView(it).also { mapView ->
                    mapView.mapboxMap.loadStyle(Style.STANDARD)
                    val annotationApi = mapView.annotations
                    pointAnnotationManager =
                        annotationApi.createPointAnnotationManager(annotationConfig)
                    mainMapboxMap = mapView.mapboxMap
                    setupCamera(mapView, startZoom, centerPoint)
                    setMaxZoom(mapView, maxZoom)
                    mapView.mapboxMap.subscribeCameraChanged(callback)
                }
            }, update = { mapView ->
                mainMapboxMap = mapView.mapboxMap
                pointAnnotationManager?.let { manager ->
                    manager.deleteAll()
                    mapView.viewAnnotationManager.removeAllViewAnnotations()
                    val listP = manager.create(pointAnnotationOptionsList)
                    listP.map { pointAnnotation ->
                        var viewAnnotation: View = mapView.viewAnnotationManager.addViewAnnotation(
                            resId = R.layout.annotation_view,
                            options = viewAnnotationOptions {
                                geometry(pointAnnotation.geometry)
                                allowOverlap(true)
                            }
                        )

                        viewAnnotation.setOnClickListener {
                            val data = pointAnnotation.getData()
                            val item = gson.fromJson(data, MapItemListLiteModel::class.java)
                            onClickPoint(item.itemId)
                        }

                        if (viewAnnotation.isVisible) {
                            val data = pointAnnotation.getData()
                            val item = gson.fromJson(data, MapItemListLiteModel::class.java)
                            AnnotationViewBinding.bind(viewAnnotation).apply {
                                icon.load(item.url) {
                                    crossfade(true)
                                    memoryCacheKey(MemoryCache.Key(item.itemId.toString()))
                                    diskCacheKey(item.itemId.toString())
                                    transformations(CircleCropTransformation())
                                }
                            }
                        }
                    }

                }

                NoOpUpdate
            }, modifier = modifier
        )