[javascript] Mapbox지도에서 레이어 간 상호작용 기능 추가하기

22 Nov 2023

javascript

Mapbox는 사용자 친화적인 지도 및 위치 기반 서비스를 제공하는 플랫폼입니다. 이를 통해 우리는 웹 애플리케이션에서 다양한 레이어를 표시하고 상호작용할 수 있습니다. 이 글에서는 Mapbox지도에서 레이어 간 상호작용 기능을 추가하는 방법에 대해 알아보겠습니다.

HTML 파일 설정

먼저, HTML 파일을 생성하고 Mapbox 라이브러리를 로드해야 합니다. 다음과 같이 HTML 파일의 head 섹션에 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Mapbox 레이어 상호작용 예제</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // JavaScript 코드는 아래에서 설명합니다.
    </script>
</body>
</html>

JavaScript 코드 작성

다음으로, JavaScript 코드 부분에서 Mapbox 지도 및 레이어를 생성하고 상호작용 기능을 추가해야 합니다. 아래는 예제 코드입니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-74.5, 40],
    zoom: 9
});

map.on('load', function() {
    // 레이어를 추가하는 코드는 이곳에 작성합니다.
    
    // 레이어 간 상호작용을 설정하는 코드는 이곳에 작성합니다.
});

위 코드에서 YOUR_ACCESS_TOKEN 자리에는 개인적으로 생성한 Mapbox의 access token을 입력해야 합니다.

레이어 추가하기

먼저, 레이어를 추가하는 방법을 알아보겠습니다. 예를 들어, Mapbox의 서비스 중 하나인 “지적편집도”를 표시해보겠습니다. 다음은 지적편집도 레이어를 추가하는 코드입니다.

map.on('load', function() {
    map.addSource('cadastre', {
        type: 'vector',
        url: 'mapbox://mapbox.cadastre'
    });

    map.addLayer({
        'id': 'cadastre',
        'source': 'cadastre',
        'source-layer': 'cadastre',
        'type': 'fill',
        'paint': {
            'fill-color': 'rgba(0, 0, 255, 0.5)'
        }
    });
});

위 코드에서 map.addSource() 함수를 사용하여 레이어의 데이터 원천을 설정합니다. 그 후, map.addLayer() 함수를 사용하여 실제 레이어를 추가합니다.

레이어 간 상호작용 기능 추가하기

이제, 레이어 간의 상호작용을 추가하는 방법을 알아보겠습니다. 레이어 간에 마우스 클릭 시, 색상이 변경되는 예제를 보여드리겠습니다.

map.on('load', function() {
    // 레이어를 추가하는 코드는 생략합니다.

    map.on('click', 'cadastre', function(e) {
        map.setPaintProperty('cadastre', 'fill-color', 'rgba(255,0,0,0.5)');
    });

    // 클릭 이벤트가 완료되면 원래 색상으로 되돌리는 코드
    map.on('click', function(e) {
        map.setPaintProperty('cadastre', 'fill-color', 'rgba(0,0,255,0.5)');
    });
});

위 코드에서 map.on('click', 'cadastre', ...) 함수를 사용하여 특정 레이어를 클릭했을 때 실행되는 코드를 작성합니다. 이 예제에서는 클릭 시 레이어의 색상을 빨강으로 변경하고, 다른 곳을 클릭했을 때는 원래 색상으로 되돌리는 코드를 추가하였습니다.

이렇게 함으로써 Mapbox지도에서 여러 레이어 간의 상호작용 기능을 추가할 수 있습니다.

위의 예제는 Mapbox의 기본 기능을 사용하여 Mapbox지도에서 레이어 간 상호작용을 구현하는 방법을 설명했습니다. 더 자세한 정보는 Mapbox 공식 문서를 참조하세요.