라이브러리 깃허브 링크
네이버 지도 OpenAPI + 서울시 공공 데이터 를 이용하여 지도에 마커를 클러스터링 해주려 한다.
구글 지도에는 마커 클러스터링 기능이 있지만, 네이버 지도에는 없어서 TedNaverMapClustering 라이브러리를 사용하였다.
implementation 'io.github.ParkSangGwon:tedclustering-naver:1.0.2'
// 주차장 정보
data class Row(
val PARKING_CODE: String, // 주차장코드
val PARKING_NAME: String, // 주차장명
val ADDR: String, // 주소
val LAT: Double, // 주차장 위치 좌표 위도
val LNG: Double, // 주차장 위치 좌표 경도
val TEL: String, // 전화번호
val OPERATION_RULE_NM: String // 운영구분명
):Serializable, TedClusterItem {
override fun getTedLatLng(): TedLatLng {
return TedLatLng(LAT, LNG)
}
}
MapActivity.kt
// 리스트들 마커 찍기
fun updateMarker(rows: List<Row>) {
// 마커 클러스터링
TedNaverClustering.with<Row>(mContext, naverMap)
.customMarker { // 마커를 원하는 모양으로 변경
Marker().apply {
icon = OverlayImage.fromResource(R.drawable.img_map_marker)
width = 60
height = 86
}
}
.items(rows)
.make()
}
.customCluster { // 클러스터 View 를 원하는 모양으로 변경
TextView(this).apply {
setBackgroundColor(ContextCompat.getColor(mContext, R.color.main_purple1))
setTextColor(ContextCompat.getColor(mContext, R.color.main_color))
text = "${it.size}개"
setPadding(10, 10, 10, 10)
}
}
.markerClickListener { // 마커 클릭 시 바텀 시트 띄우기
// Utils.Toast(mContext,"클릭된 주차장 : ${it.PARKING_NAME}, ${it.ADDR}")
Utils.Log("클릭된 주차장 : $it")
selectedParkInfo = it
val bottomSheet = ParkBottomSheetFragment(mContext)
bottomSheet.arguments =
Bundle().apply { putSerializable("data",selectedParkInfo) }
bottomSheet.show(supportFragmentManager,bottomSheet.tag)
}
.minClusterSize(20) // 클러스터로 보여줄 최소 개수