지도에 중복 위경도 마커를 찍어보자

기획자와 개발자의 어느 대화...

🙋‍♂️ 매장의 위경도가 같으면 지도에 찍는 마커 위에 위경도가 중복되는 매장의 개수를 표시해주세요. 다만, 중복 위경도가 아니면 일반적인 마커를 찍어주시면 됩니다.

🙎🏼‍♂️ 네...? 지금 그러면...서버에서 내려주는 데이터에서 위경도에서 중복인 것을 묶어야겠네요! 한번 만들어 보겠습니다.(험난한 여정이 되겠군...)

기존 지도 매장 정보 데이터

data class StoreItem(
    @SerializedName("id")
    val id: Long,

    @SerializedName("name")
    val name: String,

    @SerializedName("latitude")
    val latitude: Double,

    @SerializedName("longitude")
    val longitude: Double
)

서버에서는 중복 위경도에 관한 flag 없이 데이터베이스에 존재하는 모든 매장 리스트를 내려주고 있다. 프런트엔드에서 storeItem에 latitude, longitude를 가지고 중복 위경도를 분리하여 중복 위경도를 기준으로 매장을 나눠야 한다.

설계

- HashMap으로 접근

먼저 같은 위경도끼리 하나로 묶는 작업을 해야 한다. 위경도를 Object으로 만들어주는 기능을 네이버맵 sdk에 있어 이를 이용하면 된다. 그러면 LatLng를 key로 설정하고 동일한 위경도인 매장을 리스트에 담아서 value로 관리하면 된다. HashMap을 사용하면 이를 전체로 묶어서 관리할 수 있다.

val pureLocationStoreList = HashMap<LatLng, ArrayList<StoreItem>>()

• key : Geometry Latlng
  • Latlng은 Geometry에서 제공하는 Obejct으로 매개변수를 latitude와 longitude 가진다.
• value : 매장 리스트
  • Latlng 기준으로 매장을 분리한다.

👉 동일한 위경도를 가진 매장끼리 리스트를 만든다. 즉 중복 위경도는 사라진다.

중복 위경도 매장 리스트 추출 로직

val pureLocationStoreList = HashMap<LatLng, ArrayList<StoreItem>>()

private fun setPureLocationStoreList(storeList: ArrayList<StoreItem>) {
   for (i in 0 until storeList.size) {
       val latLng = LatLng(storeList[i].latitude, storeList[i].longitude)
        if (pureLocationStoreList[latLng] == null) {
           //신규 key 이면 value에 리스트를 선언 한다.
           pureLocationStoreList[latLng] = ArrayList()
        }
        //속해있는 location key에 storeItem 을 add 한다.
        pureLocationStoreList[latLng]?.add(storeList[i])
   }
}

먼저 매장의 latitude와 longitude로 Latlng를 생성한다.

해당 Latlng가 key인 value에 빈 배열을 생성한 후에 매장 정보를 추가한다.

• 생성한 Latlng가 HashMap의 key에 존재하지 않을 경우
  • 해당 Latlng가 key인 value에 빈 배열을 생성한 후에 매장 정보를 추
• 생성한 Latlng가 HashMap에 없을 경우
  • value에 매장 정보를 추가

중복 위경도 매장 리스트 마커로 표현

- 마커 정보 생성

val pureLocationStoreList = HashMap<LatLng, ArrayList<StoreItem>>()

private fun setPureLocationStoreList(storeList: ArrayList<StoreItem>) {
   for (i in 0 until storeList.size) {
       val latLng = LatLng(storeList[i].latitude, storeList[i].longitude)
        if (pureLocationStoreList[latLng] == null) {
           //신규 key 이면 value에 리스트를 선언 한다.
           pureLocationStoreList[latLng] = ArrayList()
        }
        //속해있는 location key에 storeItem 을 add 한다.
        pureLocationStoreList[latLng]?.add(storeList[i])
   }
}

먼저 LatLng 리스트를 생성하고 매장 리스트 크기만큼 for문을 실행시킨다. 만약 LatLng 리스트에 매장의 LatLng가 존재하지 않는 경우에는 해당 LatLng를 LatLng 리스트에 add한다. 이와 같은 조건을 걸어 놓은 이유는 중복 위경도 매장 개수만큼 마커를 생성하면 마커가 동일한 위치에 여러 개가 생성되는 문제가 발생하여 중복 위경도 같은 경우에는 마커를 한 번만 생성해야 하기 위해서다.

마커를 생성해야 하는 매장 리스트에 있는 위경도를 리스트에 모았으니 이제는 중복 위경도의 마커인 경우에는 중복 매장 개수를 보여줘야 한다. 마커를 생성하는 메서드인 unSelectMarker 전에 i번째 LatLng가 key의 value에 존재하는 매장 리스트의 크기를 가져온다.

- 마커 생성

private fun unSelectMarker(storeItem: StoreItem, latLng: LatLng, storeCount: Int) {
   val markerLayout: View = LayoutInflater.from(activity).inflate(R.layout.map_marker, null)
   val markerImageView: ImageView = markerLayout.findViewById(R.id.custom_marker)
   val countView: ConstraintLayout = markerLayout.findViewById(R.id.store_count_view)
   val countTextView: TextView = markerLayout.findViewById(R.id.tv_store_size)
     if (storeCount > 1) { //중복 매장 갯수가 2이상일 경우
        countView.visibility = VISIBLE
        countTextView.text = storeCount.toString()
     } else {
        countView.visibility = GONE
     }
        val marker = Marker()
		 }
        ......
}