[javascript] Mapbox지도에 클러스터링 기능 추가하기

22 Nov 2023

javascript

Mapbox는 인기있는 지도 서비스 중 하나로, 다양한 기능과 유연성을 제공합니다. 이 중에서도 클러스터링 기능은 지도에 점들이 많이 겹쳐있을 때 유용하게 사용됩니다. 클러스터링은 겹친 점들을 하나의 그룹으로 묶어 표시하고, 클릭하면 그룹 안에 속한 점들을 볼 수 있게 해줍니다.

클러스터링 라이브러리 설치

먼저, 클러스터링 기능을 사용하기 위해서는 클러스터링 라이브러리를 설치해야 합니다. 이 예시에서는 Mapbox GL JS와 Supercluster 라이브러리를 사용하도록 하겠습니다.

npm install mapbox-gl supercluster

Mapbox지도에 클러스터링 적용하기

HTML 파일 생성

먼저 HTML 파일을 생성하고 Mapbox지도를 띄우기 위한 기본적인 설정을 해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mapbox Clustering Example</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        #map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
    <script src="https://unpkg.com/supercluster/dist/supercluster.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript 파일 생성

다음으로 JavaScript 파일을 생성하여 클러스터링 기능을 적용합니다.

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

// Mapbox지도 생성
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [lng, lat], // 지도 중심 좌표
    zoom: 10 // 지도 초기 줌 레벨
});

// 클러스터링 설정
var supercluster = new Supercluster({
  radius: 60, // 클러스터링 반경 설정 (px)
  maxZoom: 16 // 클러스터링이 끝나고 점들이 보이는 최대 줌 레벨
});

// 클러스터링 데이터 설정
var data = [
    {geometry: {type: 'Point', coordinates: [lng1, lat1]}},
    {geometry: {type: 'Point', coordinates: [lng2, lat2]}},
    // ...
];

// 클러스터링 인덱스 생성
supercluster.load(data);

// 클러스터링 레이어 생성 및 추가
map.on('load', function() {
    map.addSource('clusters', {
        type: 'geojson',
        data: supercluster.getClusterExpansionZoom(0)
    });

    map.addLayer({
        id: 'clusters',
        type: 'circle',
        source: 'clusters',
        paint: {
            'circle-color': '#51bbd6',
            'circle-radius': [
                'step',
                ['get', 'point_count'],
                20, // 클러스터 반경 설정 (px)
                100, // 클러스터링 시작이 아닌 개별 점 반경 설정 (px)
                750 // 클러스터링 시작 중심 개수 반경 설정 (px)
            ],
            'circle-opacity': 0.8
        }
    });
});

// 클러스터 클릭 이벤트 설정
map.on('click', 'clusters', function(e) {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });

    const clusterId = features[0].properties.cluster_id;

    // 개별 점들 표시
    const clusterExpansionZoom = supercluster.getClusterExpansionZoom(clusterId);
    map.getSource('clusters').setData(
        supercluster.getClusterChildren(clusterId)
    );

    // 클릭한 클러스터로 이동
    map.easeTo({
        center: features[0].geometry.coordinates,
        zoom: clusterExpansionZoom
    });
});

위의 코드에서 YOUR_MAPBOX_ACCESS_TOKEN, lng, lat, lng1, lat1, lng2, lat2, 등은 개발자가 직접 지정해야 하는 값들입니다. 자신의 Mapbox access token과 좌표값을 설정하세요.

클러스터링 확인하기

위의 코드를 실행하면 Mapbox지도가 생성되고, 클러스터링이 적용됩니다. 점들이 많이 겹쳐있을 경우, 클러스터로 묶여 표시됩니다. 클러스터를 클릭하면 그룹 안에 속한 점들을 볼 수 있고, 클러스터를 더블클릭하면 해당 클러스터로 이동합니다.

위의 예제는 Mapbox지도에 클러스터링 기능을 추가하기 위한 기본적인 방법을 보여줍니다. 상황에 맞게 코드를 수정하여 활용해보세요.