Mapbox는 대표적인 웹 기반 지도 서비스입니다. Mapbox SDK는 자바스크립트를 통해 지도 레이어를 다룰 수 있도록 도와줍니다. 이번 글에서는 자바스크립트로 Mapbox 지도의 레이어 순서를 변경하는 방법에 대해 알아보겠습니다.

Mapbox SDK 설치하기

Mapbox SDK를 사용하기 위해 먼저 해당 패키지를 설치해야 합니다. 아래 명령어를 사용하여 npm을 통해 Mapbox SDK를 설치할 수 있습니다.

npm install mapbox-gl

Mapbox SDK 초기화하기

레이어 순서를 변경하려면 먼저 지도 객체를 생성해야 합니다. 아래 코드와 같이 Mapbox SDK를 초기화할 수 있습니다.

var mapboxgl = require('mapbox-gl');

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

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

위 코드에서 YOUR_ACCESS_TOKEN을 자신의 Mapbox 액세스 토큰으로 바꿔주어야 합니다. 또한, lng과 lat은 초기 지도의 중심 좌표를 나타내는 값입니다.

레이어 순서 변경하기

Mapbox SDK를 사용하여 다양한 레이어를 추가한 후, 이들 레이어의 순서를 변경할 수 있습니다. 아래 코드는 기존 레이어 순서를 변경하는 예시입니다.

map.on('load', function(){
    var layers = map.getStyle().layers;
    var firstSymbolId;
    
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol') {
            firstSymbolId = layers[i].id;
            break;
        }
    }
    
    map.moveLayer(firstSymbolId, 'waterway-label');
});

위 코드에서 moveLayer() 함수를 사용하여 레이어의 순서를 변경합니다. moveLayer() 함수는 첫 번째 인자로 레이어의 ID를, 두 번째 인자로 이동할 위치를 입력받습니다. 이동할 위치는 기존 레이어의 ID로 지정할 수 있습니다.

위 예시에서는 firstSymbolId와 'waterway-label'를 입력하여 첫 번째 심볼 레이어를 'waterway-label' 레이어의 위로 이동시킵니다.

마치며

위 글에서는 자바스크립트를 사용하여 Mapbox 지도의 레이어 순서를 변경하는 방법에 대해 알아보았습니다. 이를 활용하면 Mapbox를 보다 유연하게 다룰 수 있을 것입니다. 자세한 내용은 Mapbox SDK 공식 문서를 참고하시기 바랍니다.

참고 문서: Mapbox SDK