카카오맵 11 클러스터 기능

카카오맵에서 게시글(마커)이 워낙 많아지다보니 굉장히 복잡해보였다.
게다가 구글폼 설문지에서도 같은 이유로 복잡해보인다는 피드백을 받았다.
따라서 클러스터 기능을 추가했다.
사실 기존에 만들어져있던 코드에서 클러스트 기능을 추가하려고하니 조금 난감하긴 했지만 정말 생각보다쉽게 할 수 있었다.
카카오맵 Docs를 보니 각 method마다 설정하는 방법이 나와있어서 쉽게 할 수 있엇다.

    <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.357055559128746,
            lng: 126.52969312230688,
          }}
          style={{
            // 지도의 크기
            width: '1200px',
            height: '700px',
          }}
          level={10} // 지도의 확대 레벨
        >
          <MarkerClusterer  // 단순히 이쪽 부분만 추가했는데, 기존에 map함수를 이용해 마커를 불러오다보니 바로 쉽게 적용이 된 것 같다.
            averageCenter={true} // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
            minLevel={10} // 클러스터 할 최소 지도 레벨
            gridSize={70}
            minClusterSize={1}
          >
            <ZoomControl position={kakao.maps.ControlPosition?.RIGHT} />
            <MapTypeControl position={kakao.maps.ControlPosition?.TOPRIGHT} />

            {data

              .filter((item: IMarkerData) =>
                selectTown.length === 0 && selectCity === '제주전체'
                  ? true
                  : selectTown.length === 0 && item.city === selectCity
                  ? true
                  : selectTown.includes(item.town)
              )

              .map((item: IMarkerData) => {
                return (
                  <ModalMapsMarker
                    item={item}
                    isOpen={isOpen}
                    setIsOpen={setIsOpen}
                    key={item.id}
                  />
                );
              })}
          </MarkerClusterer>
        </Map>