지리 정보를 쉽게 사용할 수 있는 형태로 표시하려면 지도를 사용해야 합니다. 그러나 사용자가 더 많은 정보를 탐색하기 위해서는 큰 그림을 빠르게 전달하고 한 눈에 이해할 수 있는 지도가 필요합니다.

수백 개의 데이터 포인트가 모여있으면 정확도가 떨어집니다. 이번 포스팅에서는 JavaScript의 마커 클러스터러 라이브러리를 사용하여 모든 마커가 겹치지 않고 동일한 정보를 집계하여 전달하는 방법을 다룹니다. 또한 마커 클러스터링을 자체 프로젝트에 맞게 조정하는 방법도 함께 알아보겠습니다.

 

왜 마커 클러스터링이 필요한가요?

아래 지도를 한 번 살펴봅시다. 호주와 뉴질랜드에 여러 마커가 퍼져 있습니다.

지도 상에 많은 유용한 마커가 제공되어 있지만, 마커들끼리 겹쳐져 알아보기가 힘듭니다. 25개 이하의 장소이지만 거리가 너무 가까워 지도에 정확히 표시할 수가 없습니다.

지도가 이와 같다면 사용자들은 여러분이 제공하려 하는 훌륭한 정보를 모두 흡수하지 못할 수도 있습니다. 그래서 마커 클러스터링이 필요합니다. 간단한 오픈 소스 라이브러리와 약간의 지도 코드 변경으로 마커 클러스터링을 추가하여 사용자 경험을 굉장히 향상시킬 수 있습니다.

 

마커 클러스터링은 마커를 시각적으로 통합하는 데 유용한 도구입니다. 지도에 있는 근처의 마커를 클러스터로 결합하여 사용자가 맵 전체를 쉽게 이해할 수 있으며, 이는 지도에 하나의 아이콘으로 표시됩니다.

 

 

지도에서 마커 클러스터링 활성화하기

Javascript 몇 줄만으로 클러스터링을 추가할 수 있습니다. 아래 예제는 웹 지도이지만, 구글 지도 플랫폼 안드로이드나 iOS SDK에도 비슷한 유틸리티가 있습니다. 마커 클러스터를 만들기 위해서, 먼저 클러스터링 되지 않은 마커를 만드는 법 부터 배워봅시다. 일반적인 마커를 지도에 생성할 때의 코드는 보통 아래와 같습니다.

const pos1 = {lat: -33.727111, lng: 150.371124};

const marker1 = new google.maps.Marker({position: pos1, map: map});

const pos2 = {lat: -33.718234, lng: 150.363181};

const marker2 = new google.maps.Marker({position: pos2, map: map});

 

이 두 마커로 클러스터링을 실행해봅시다.

마커 클러스터링을 사용하려면 지도 코드에 두 가지를 추가해야 합니다. 먼저, 마커 클러스터러 라이브러리를 로드합니다. 프로덕션의 경우 GitHub에서 소스를 다운로드하고 자체 서버에서 JavaScript를 호스팅 해야하지만, 이 데모를 위해 구글 지도 플랫폼 설명 사이트에서 로딩합니다.

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">

 

다음, 지도와 마커에서 클러스터링 라이브러리로 넘어가서 마커 변수 아래에 다음과 같이 추가합니다.

// create an array of all your markers

const markers = [marker1, marker2]; 

// Path for cluster icons to be appended (1.png, 2.png, etc.)

const imagePath = "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m";

// Enable marker clustering for this map and these markers

const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});

 

다시 한 번, 프로덕션의 경우 여러분의 서버에서 클러스터링 이미지를 호스팅해야 합니다. 이 예시에서는 최소 클러스터 크기만 필요하므로 m1.png를 로드합니다.

MarkerClusterer 인스턴스를 만들면 지도 변수, 마커 배열 및 이미지 경로를 전달합니다. 이 정보로부터 마커 클러스터러 라이브러리가 인계되어 클러스터에 포함된 포인트 수와 함께 아이콘을 표시합니다.

 

클러스터 아이콘을 클릭하면 아래와 같이 각각의 마커가 다 표시되는 레벨까지 확대됩니다.

 

줌 아웃 하면 다시 두 개의 클러스터가 보이는 레벨로 돌아갑니다.

더 많은 포인트와 상세한 설명은 마커 클러스터링 가이드에서 확인할 수 있습니다.

 

마커 클러스터링이 작동하는 방법

마커 클러스터링 라이브러리는 GitHub의 오픈 소스 맵 유틸리티의 일부입니다. 모든 코드에 액세스하고 필요한 경우 변경도 할 수 있습니다. 알고리즘이 어떻게 작동하는지 자세히 살펴보겠습니다.

알고리즘이 맵을 그리드로 분할하고, 그리드의 각 섹션은 기본적으로 60×60 픽셀입니다. 위의 고밀도 마커 예를 사용하여 다음과 같이 시각화할 수 있습니다.

 

실제로, 그리드는 마커 자체에 기반하고 있기 때문에 위와 정확히 같지는 않을 것입니다. 첫 번째 마커는 첫 번째 섹터의 중심이 됩니다. 해당 섹터 내의 후속 마커가 해당 섹터에 대한 클러스터에 추가되고 클러스터의 중심이 모든 마커의 평균에 따라 업데이트됩니다. 마커가 여러 클러스터에 포함될 수 있는 경우 마커 좌표 사이의 거리를 기준으로 가장 가까운 클러스터에 추가됩니다.

기본 설정 및 알고리즘은 대부분의 사용 사례를 다루지만 코드는 완전히 공개 소스이므로 필요한 모든 변경 작업을 수행할 수 있습니다.

 

 

마커 클러스터 사용자 지정하기

마커 클러스터의 모양과 기능을 조정하는 방법은 여러 가지가 있습니다. 대부분의 경우 기본 라이브러리를 편집하도록 요구하지 않습니다. 대신 클러스터를 생성할 때 설정할 수 있는 여러 옵션이 있습니다.

클러스터된 맵을 직접 만드는 가장 쉬운 방법은 자체 아이콘을 사용하는 것입니다. 단순 클러스터링 예제에서는 imagePath 옵션을 전달했습니다. 클러스터 라이브러리는 경로 끝에 숫자(1-5)를 추가한 다음 파일 확장자를 추가합니다. 파일 확장자는 기본적으로 .png입니다. imageExtension으로 다른 파일 형식을 사용할 수도 있습니다. 투명 아이콘이 지도에서 가장 잘 보인다는 것을 명심하세요.

기본적으로 클러스터를 만드는 데 두 개의 마커만 있으면 됩니다. minimumClusterSize 옵션을 사용하여 이 설정을 변경할 수 있습니다. 이 숫자를 늘리면 마커가 겹칠 수 있지만 몇 개가 겹칠 수 있는지에 대한 임계값을 설정할 수 있습니다.

다음은 마커 클러스터 라이브러리를 사용할 수 있는 몇 가지 다른 옵션입니다.

• gridSize: 클러스터 그리드 내의 픽셀 수입니다.
• zoomOnClick: 클릭 시 클러스터를 확대할지 여부를 나타냅니다.
• maxZoom: 일반 마커가 항상 표시되기 전에 확대할 수 있는 가장 먼 수준입니다.
• styles: 각 클러스터 유형에 대한 개체 배열로, textSize 및 클러스터의 기타 기능을 포함합니다.

 

아래와 같이 클러스터 라이브러리에 대한 호출과 함께 위의 모든 옵션을 사용할 수 있습니다.

// Options to pass along to the marker clusterer

const clusterOptions = {

  imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",

  gridSize: 30,

  zoomOnClick: false,

  maxZoom: 10,

};

// Add a marker clusterer to manage the markers.

const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);

// Change styles after cluster is created

const styles = markerClusterer.getStyles();

for (let i=0; i<styles.length; i++) {

  styles[i].textColor = "red";

  styles[i].textSize = 18;

}

 

호주와 뉴질랜드 예시에 위와 같은 옵션이 적용된다면, 지도 상에서는 아래와 같이 보일 것입니다.

클러스터가 늘어났다는 것과 (더 작은 그리드 사이즈 때문에) 숫자가 빨간색으로 바뀌고 더 커졌다는 것을 확인할 수 있습니다.

클러스터를 클릭해도 확대되지 않는 대신, 수동으로 확대할 수 있습니다. 개별 마커는 전보다 더 빨리 표시되며, 그리드 사이즈 때문에 대부분 마커 오버랩이 적게 발생합니다. 레벨 10까지 확대하면 (기본은 레벨3입니다), 모든 마커는 거리 상관없이 모두 표시됩니다.

여기까지 따라하시면 빽빽하게 마커된 지도에서 멋지게 클러스터링 된 지도로 바꾸실 수 있습니다. 이제 새로운 기술을 적용하여 사용자들에게 더 나은 경험을 제공하세요! 여기서 마커 클러스터러 라이브러리를 편집할 수 있는 많은 방법을 발견하실 수 있습니다.

더 많은 정보는 구글 지도 플랫폼 웹사이트에서 확인할 수 있습니다.

 

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 케이스에 존재하는 다양한 제품군을 보유하고 있는 고객의 사례에 꼭 맞는  무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 각 케이스에 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며,  SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다. 감사합니다.

 

 

Powered by Froala Editor

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다