[코틀린] 네이버 맵 API , TedNaverClustering 적용

구글맵에서는 클러스터링을 지원한다는데 모바일 네이버맵 api에서는  클러스터링을 지원하지 않는다...

있을법도 한데 없다는 게 놀라울 따름이다.

 

그래서 어떻게 클러스터를 하나 검색해보니 누군가 만들어놓은 라이브러리가 있어서 옳다구나! 하고 적용했다.

그런데 깃헙에 가서 해당 라이브러리를 봐도 설명이 너무나도 부족하다...

그래도 있는 게 어딘가? 

 

사용해본 코드. 완전한 코드는 아니고 일부 발췌.

 private var tedNaverClustering: TedNaverClustering<LocationBasedListItem>? = null
 private var naverMap: NaverMap? = null
 
override fun onMapReady(p0: NaverMap) {
tedNaverClustering =
            TedNaverClustering.with<LocationBasedListItem>(requireContext(), naverMap!!)
                .customMarker {
                    Marker().apply {
                        val zoom = naverMap?.cameraPosition?.zoom!!
                        if (zoom.toInt() > 13) {
                            captionText = it.facltNm.toString()
                        }
                        captionRequestedWidth = 200
                        setCaptionAligns(Align.Top)
                        captionOffset = 5
                        captionTextSize = 16f
                        //markers.add(this)
                    }
                }
                .markerClickListener {
                    val tag = it.induty
                    val loc = it.lctCl
                    imgAdapter.clear()
                    binding.clMapBottomDialog.setOnClickListener(null)
                    binding.tvDialogtag.text = "$tag · $loc"
                    binding.tvDialogcampname.text = it.facltNm
                    binding.tvDialoglocation.text = it.addr1
                    binding.clMapBottomDialog.isGone = false
                    binding.clMapBottomDialog.setOnClickListener { view ->
                        val intent = Intent(requireContext(), CampDetailActivity::class.java)
                        var data = CampEntity(
                            contentId = it.contentId,
                        )
                        intent.putExtra("campData", data)
                        startActivity(intent)
                    }
                    val param = viewModel.getImgParamHashmap(it.contentId.toString())
                    viewModel.getImgList(param)
                }
                .minClusterSize(0)
                .clusterBuckets(intArrayOf(5000, 100))
                .items(mutableListOf())
                .make()
}

.customMarker{} : 클러스터에 나올 마커를 꾸며주는 메서드이다. 괄호 안에서 수정해주면 된다.

.customCluster { } : 클러스터를 꾸며주는 메서드이다. 괄호 안에서 수정해주면된다.

.markerClickListener {} : 마커 아이콘을 클릭했을 때 수행할 동작을 입력해주면 된다.

.clusterClickListener { }: 클러스터 아이콘을 클릭했을 때 수행할 동작을 입력해주면 된다.

 .minClusterSize() : 클러스터 아이콘이 생성되는 최소 개수를 입력. 10이면 마커가 10개 이상 모였을 때 클러스터링 된다.

해당 코드는 0 이므로 1개 이상만 있어도 바로 클러스터링 아이콘이 생성됨.
.clusterBuckets(intArrayOf(5000, 100)) : 숫자 배열을 입력하면 된다. 앞에 5000은 클러스터링 아이콘에 표시되는 최대숫자다. 이 숫자를 초과해서 마커가 모인다면 '5000+' 로 표시된다, 뒤는 클러스터링이 되는 범위를 의미한다.
 .items(mutableListOf()) : 클러스터링할 배열을 넣으면 된다. 배열에 넣을 객체는 TedClusterItem을 상속하고 있어야한다. 이 부분은 깃헙 라이브러리 페이지에 소개되어 있다.
 .make() : 생성 메소드

 

클러스터링이란 단어도 몰랐는데 구현하려고 보니 꽤나 복잡해보였는데 라이브러리가 있어서 다행이였다.