REACT_leaflet MarkerClusterGroup을 사용해보자.

MarkerClusterGroup이 무엇이냐

바로

요렇게 leaflet의 마커들을 합쳐주는 라이브러리 인 것이다.

사용법을 정리해보자.

npm i react-leaflet-markercluster

로 일단 라이브러리를 설치한다.(이전에 react-leaflet 설치 되어있어야함...검색 ㄱㄱ)

그리고

import MarkerClusterGroup from 'react-leaflet-markercluster';

만약 마커 그리고 아이콘이 안뜨고 텍스트만 뜬다면

import "leaflet.markercluster/dist/leaflet.markercluster"
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"

요것도 붙여넣어보자...

사용법은 간단하다.

<MapContainer 설정알아서>
   <TileLayer 설정알아서/>
   <MarkerClusterGroup>
      <Marker position={[위도,경도]}/>
   </MarkerClusterGroup>
</MapContainer>

나는 서버에서 데이터를 가져온 후 마커를 뿌려줘야 했는데

마커 부분에 map 으로 돌려주면 알아서 위에 스크린샷 처럼 잘 나온다.