ClursterMarker 에 대한 Click Event 지원

easyhooon commented 5 months ago

기존에 Clustering 을 지원하기 위해 사용되었던 Ted Clustering 의 경우 다음과 같은 방법으로 클러스터링 된 마커에 대해 클릭 리스너를 구현할 수 있었습니다.

var clusterManager by remember { mutableStateOf<TedNaverClustering<BoothDetailMapModel>?>(null) }
DisposableMapEffect(uiState.boothList) { map ->
    if (clusterManager == null) {
        clusterManager = TedNaverClustering.with<BoothDetailMapModel>(context, map)   
            .markerClickListener { booth -> // 각 마커에 대한 클릭 이벤트
                onMapUiAction(MapUiAction.OnBoothMarkerClick(listOf(booth)))
            }
            .clusterClickListener { booths -> // 클러스터링된 마커에 대한 클릭 이벤트
                onMapUiAction(MapUiAction.OnBoothMarkerClick(booths.items.toList()))
            }
            .make()
    }
    clusterManager?.addItems(uiState.boothList)
    onDispose {
        clusterManager?.clearItems()
    }
}

그런데 현재 naver-map-compose 에서의 경우 지원을 하지 않은 것으로 추측되는데요

var clusterManager by remember { mutableStateOf<Clusterer<BoothDetailMapModel>?>(null) }
DisposableMapEffect(uiState.boothList) { map ->
    if (clusterManager == null) {
        clusterManager = Clusterer.Builder<BoothDetailMapModel>()
            .clusterMarkerUpdater(object : DefaultClusterMarkerUpdater() {
                override fun updateClusterMarker(info: ClusterMarkerInfo, marker: Marker) {
                    super.updateClusterMarker(info, marker)
                    // TODO: 클러스터링된 마커에 대한 클릭 이벤트 지정
                }
            })
            .leafMarkerUpdater(object : DefaultLeafMarkerUpdater() {
                override fun updateLeafMarker(info: LeafMarkerInfo, marker: Marker) {
                    super.updateLeafMarker(info, marker)
                    marker.onClickListener = Overlay.OnClickListener {
                        // 각 마커에 대한 클릭 이벤트
                        onMapUiAction(MapUiAction.OnBoothMarkerClick(listOf(info.key as BoothDetailMapModel)))
                        true
                    }
                }
            })
            .build()
            .apply { this.map = map }
    }
    val boothListMap = buildMap(uiState.boothList.size) {
        uiState.boothList.forEachIndexed { index, booth ->
            put(booth, index)
        }
    }
    clusterManager?.addAll(boothListMap)
    onDispose {
        clusterManager?.clear()
    }
}

updateLeafMarker 함수 내에서는 info.key 를 통해 클릭된 각 마커에 대한 정보를 info.key as DataClass를 통해 가져올 수 있는데, updateClusterMarker 함수 내에서는 key 와 같은 값을 ClusterMarkInfo 클래스에서 얻을 수 없어, 클릭된 클러스터링 마커에 대한 정보 목록을 가져올 수 없었습니다.

Default 클릭 이벤트로, 클러스터링된 마커를 클릭할 경우, 지도가 확대되면서 클러스터링된 마커가 여러개의 마커로 분리되는 이벤트가 지정되어있는 것 같은데, 혹시 클러스터링된 마커를 클릭할 경우 해당 마커 내에 포함된 정보 목록을 가져올 수 있는 방법이 있는지 궁금합니다.

목적은 해당 클러스터링된 마커를 클릭할 경우 포함된 List<DataClass>를 리스트 형태로 화면에 출력하기 위함 입니다.

fornewid commented 5 months ago

@easyhooon 님 등록해주신 내용은 네이버지도 SDK의 클러스터링 API 사용방법에 대한 것으로 보이는데요.

compose 라이브러리는 네이버지도 SDK에서 제공되는 API를 wrapping 하여 Compose에서 쓰기 적합한 형태로 제공하는 것 뿐이고, 저는 네이버지도 팀이 아니라서 답변을 드릴 수 없을 것 같습니다.

인터페이스 및 사용방법에 대해서는 네이버지도 SDK 공식 채널로 문의해보시는 것이 좋을 것 같습니다.

easyhooon commented 5 months ago

알겠습니다. 공식 채널로 문의를 올려봐야겠네요ㅎ 답변감사드립니다! ( )

easyhooon commented 4 months ago

위의 질문에 대해서 네이버 클라우드에 문의한 결과 다음과 같은 답변을 받을 수 있었습니다.

안녕하세요. 네이버 클라우드 플랫폼입니다.

데이터를 키가 아닌 태그로 지정하고, tagMergyStrategy를 이용해 자식 리프 노드의 데이터를 리스트로 병합하여 클러스터의 태그로 지정해 접근하면 됩니다.

자세한 내용은 다음 가이드 문서를 참고하시기 바랍니다.

https://navermaps.github.io/android-map-sdk/guide-ko/5-8.html#%ED%83%9C%EA%B7%B8-%EB%B3%91%ED%95%A9-%EC%A0%84%EB%9E%B5

fornewid commented 4 months ago

@easyhooon 코멘트를 남기신 의도를 잘 모르겠지만, naver-map-compose 라이브러리와는 관련 없는 내용으로 보입니다.

문의하셔서 받은 답변대로 직접 작업하시면 될 것 같습니다.

fornewid / naver-map-compose

ClursterMarker 에 대한 Click Event 지원 #102