Clustering Composable 지원

[ho8278]

구글맵에서 제공하는 Clustering Composable 을 참고해서 네이버맵용 Clustering Composable 을 만들어봤습니다.

screen-20251001-175519.mp4

개념 설계

구글맵의 Clustering 의 기본 컨셉은 MapView 에 화면에 보이지 않는 ContainerView 를 하나 두고 이 안에 클러스터링용 마커 ComposeView 를 추가합니다. 각 ComposeView 는 클러스터링 마커가 그릴 컨텐츠를 렌더링 하고 이것을 Bitmap 으로 변환 후에 마커에 적용합니다.

MapView --> ContainerView --> ComposeView
                          --> ComposeView
                          --> ComposeView
                          --> ComposeView
                          --> ComposeView

네이버맵에서도 동일하게 클러스터링 마커를 렌더링 할 ComposeView 를 만들고 렌더링 후 이것을 Bitmap 으로 변환합니다.

MapView 에 접근 가능하도록 변경

GoogleMap MapApplier에서는 MapView 에 접근하기 위해서 MapApplier 를 사용합니다. 네이버맵에서도 동일하게 MapApplier 를 통해 MapView 에 접근할 수 있도록 수정했습니다.

TedClustering 제거

네이버맵에서 제공하는 Clustering 기능을 사용할 수 있기 때문에 TedClustering 라이브러리를 사용하는 예제를 삭제하고 의존성도 같이 삭제합니다.

사용방법

NaverMap {
    Clustering(
        items = mapOf(TestClusteringKey(position) to 1, TestClusteringKey(position) to 2, ...)
        clusterContent = {
            val backgroundColor = when {
                it.minZoom <= 10 -> Color.Red
                it.size < 10 -> Color.Blue
                else -> Color.Green
            }
            Box(
                modifier = Modifier
                    .size(48.dp)
                    .background(backgroundColor, CircleShape),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "${it.size}"
                )
            }
        },
        leafContent = {
            Box(
                modifier = Modifier
                    .size(28.dp)
                    .background(Color.Cyan, CircleShape)
            )
        },
        onClickCluster = { info, _ ->
            scope.launch {
                cameraPositionState.animate(
                    CameraUpdate.toCameraPosition(
                        CameraPosition(
                            info.position,
                            cameraPositionState.position.zoom + 2.0
                        )
                    )
                )
            }
            true
        },
        onClickLeaf = { info, _ ->
            Toast.makeText(context, "Clicked!", Toast.LENGTH_SHORT).show()
            true
        },
        minClusteringZoom = 9,
        maxClusteringZoom = 16,
        maxScreenDistance = 200.0,
        thresholdStrategy = { zoom ->
            if (zoom <= 11) {
                0.0
            } else {
                70.0
            }
        },
        distanceStrategy = { zoom: Int, node1: Node, node2: Node ->
            if (zoom <= 9) {
                -1.0
            } else if ((node1.tag as ItemData).gu == (node2.tag as ItemData).gu) {
                if (zoom <= 11) {
                    -1.0
                } else {
                    defaultDistanceStrategy.getDistance(zoom, node1, node2)
                }
            } else {
                10000.0
            }
        },
        tagMergeStrategy = { cluster ->
            if (cluster.maxZoom <= 9) {
                null
            } else {
                ItemData("", (cluster.children.first().tag as ItemData).gu)
            }
        }
    )

}

[fornewid]

@ho8278
우선 contribution 감사합니다 ㅎㅎ
몇가지 궁금한 점이 있는데요

1️⃣
추가해주신 Clustering 기능은 실제로 제품에 사용하려는 목적이신게 맞을까요?

사용하는 방법부터 고려할 것들이 많이 있어 보이는데,
저는 사용하지 않는 기능이라 구체적인 사례를 여쭤보고 싶습니다.

2️⃣
아주 급하게 필요하신 건 아니시겠죠?
그러면 추석 연휴가 끝나고나서 잠시 얘기를 나눠보면 좋을 것 같습니다.

이슈를 등록해준 @easyhooon 님도 이 기능에 관심 있으신 것 같아서,
함께 얘기나눠볼 수 있을까요?

[easyhooon]

안녕하세요! 제가 이슈를 올린 이후로 계속 클러스터링 마커를 커스텀할 수 있는지 찾아봤었는데요.
다음과 같은 글을 확인할 수 있었습니다.
[Android] 네이버 맵 공식 클러스터링 적용법

결론적으로, 현재의 라이브러리에 상황에서도 클러스터링 마커의 커스텀이 불가능하진않은데요.
단점은 OverlayImage 클래스의 함수가 지원하는 타입이 제한적이라는것입니다.
위에 첨부한 블로그글에서는 커스텀 뷰(XML)를 fromView 함수를 통해 OverlayImage로 변환해주었고, 이 과정에서 이미지가 미리 로드 되어있음을 보장하기 위해 glide와 같은 이미지 로딩 라이브러리의 도움을 받은 것으로 보여집니다.

PR로 남겨주신 방법이 공식 라이브러리에 도입이된다면, Composable 함수를 통해 클러스터링 마커를 커스텀할 수 있게되어, Compose용 NaverMap이라는 라이브러리에 정체성에 더 부합해질 것 같습니다!

또한 이슈에 언급하였던 문제 중에 하나인 markerText가 marker design내에 포함되는 경우도 Composable 함수이기에 위에 올려주신 예제 코드처럼 바로 해결될듯 합니다.

reference)
https://navermaps.github.io/android-map-sdk/guide-en/5-1.html

[ho8278]

@fornewid

추가해주신 Clustering 기능은 실제로 제품에 사용하려는 목적이신게 맞을까요?

사용하는 방법부터 고려할 것들이 많이 있어 보이는데,
저는 사용하지 않는 기능이라 구체적인 사례를 여쭤보고 싶습니다.

넵 저희가 서비스하는 제품은 지도에 마커를 1000개 이상 보여줘야 해서 클러스터링을 사용하고 있습니다. 각 마커의 컨텐츠는 서버에서 제어하는 여러가지 데이터를 조합해서 보여줘야 하기 때문에 복잡한 UI 를 그릴 수 있어야 합니다.

물론 View 하나를 만들어서 Bitmap 을 뽑아내는 방식을 쓸 수 있긴 하지만 그것보단 Compose 로 UI 를 구성하는 것이 좀 더 생산성이 높지 않을까 했습니다.

아주 급하게 필요하신 건 아니시겠죠?

관련 기능이 필요하긴 해서 라이브러리를 fork 떠서 임시로 새 라이브러리를 만들어 사용할까 생각했었습니다. 그래서 요기 레포에 당장 머지될 필요는 없습니다.

[fornewid]

두분 다 코멘트 감사합니다.
그러면 늦어도 다음주에는 포함하여 배포할 수 있도록 검토해볼게요 ㅎㅎ

그리고 지금 라이브러리 사용 중이라면, Compose 몇 버전을 기준으로 사용하시나요?
하위 버전에도 반영해서 배포해야 할지 고민되서요.

[ho8278]

지금 당장은 사용하고 있지는 않습니다만 사용하게 된다면 1.7버전이 될 것 같습니다.

[ho8278]

기존의 구조는 마커의 기본속성들(isFlat, angle 등)을 수정할 수 없습니다. 이것을 제어할 수 있는 인터페이스를 따로 제공합니다.