React-Native-Maps에 클러스터링 적용

인스타그램 채팅기능 구현 관련 포스트를 작성하다가 지루해서 만들어 봤습니다.

 

React-Native-Maps는 안드로이드에서는 구글 지도를, iOS에서는 애플 지도를 사용할 수 있게 해주는 리액트 네이티브 라이브러리입니다. iOS에서도 구글 지도를 사용할 수 있지만 약간의 버그가 있습니다.

그런데 클러스터링 기능이 탑제되어 있지 않습니다. 그래서 편법으로 구현해 봤습니다.

좌표 데이터는 카카오 마크 클러스터러 사용하기에 있는 데이터를 사용했습니다.

 

클러스터에 포함된 좌표의 개수가 많을 수록 클러스터가 커집니다.

그리고 클러스터를 터치하면, 해당 클러스터에 포함된 정보(좌표 등)를 확인할 수 있습니다.

 

안드로이드 (LG G7) 작동 화면

react-native-maps-super-cluster나 react-native-map-clustering 라이브러리가 있기는 하지만, 최상단에서 지도를 랜더링하는 MapView는 React-Native-Maps 라이브러리의 MapView를 래핑한 것이라, 다른 예제를 찾아서 적용할 때 기본 MapView와 다른점을 일일히 찾아서 적용해야 할 것 같았습니다.

그리고 react-native-map-clustering는 MapView 안에 모든 좌표를 Marker로 만들어 넣는다는게 맘에 안들었습니다. 사용은 편한데 성능 문제가 발생할 수 있을 것 같았습니다. 물론 제가 만든 것도 성능면에서 수정해야 할 부분이 있습니다. 그냥 아이디어 정도만 얻어가면 좋을 것 같습니다.

그리고 이왕이면 구글 지도의 기능을 그대로 사용하면서 클러스터링도 사용하면 좋지 않을까요?

 

구글 지도의 동적 지도(Dynamic Maps)는 모바일에서 무료입니다.

애플 지도는 API 키를 입력하지도 않는 것으로 보아 무료로 보입니다.

제작 과정은 시간 나는데로 포스팅하겠습니다.

 

iOS (아이폰6s) 작동 화면