[javascript] Mapbox지도에서 바운더리 지정하기

Mapbox는 웹 기반 매핑 플랫폼으로, 지리 데이터 시각화와 위치 기반 어플리케이션을 개발할 때 많이 사용됩니다. Mapbox를 사용하면 지도를 표시하는 동시에 다양한 기능을 추가할 수 있습니다.

바운더리는 특정 지역의 경계를 정의하는데 사용되며, Mapbox에서는 이를 지도에 표시하는 기능을 제공합니다. 바운더리를 지정하면 지도에서 해당 지역을 강조하거나, 해당 지역 내에 어떤 작업을 수행할 수 있습니다.

바운더리 데이터 준비하기

Mapbox에서 바운더리를 표시하려면 GeoJSON 형식의 데이터가 필요합니다. GeoJSON은 지리 정보를 표현하기 위한 인기있는 데이터 형식 중 하나로, 위치 정보와 해당 지역의 특성을 포함합니다.

GeoJSON 데이터는 온라인 지리 정보 데이터베이스에서 다운로드하거나, 직접 만들어서 사용할 수 있습니다. 만약 특정 국가의 행정 구역을 표시하려면, 해당 나라의 Open Data 등의 공공데이터를 사용하여 GeoJSON 데이터를 생성할 수 있습니다.

바운더리 표시하기

Mapbox에서 바운더리를 표시하기 위해서는 mapbox-gl.js 라이브러리를 사용해야 합니다. 이 라이브러리를 HTML 페이지에 추가한 후, 다음과 같은 스크립트 코드를 사용하여 바운더리를 표시할 수 있습니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

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

map.on('load', function() {
    map.addSource('boundary', {
        'type': 'geojson',
        'data': 'path/to/your/geojson'
    });

    map.addLayer({
        'id': 'boundary',
        'source': 'boundary',
        'type': 'line',
        'paint': {
            'line-color': '#ff0000',
            'line-width': 2
        }
    });
});

위 코드에서 YOUR_ACCESS_TOKEN 부분에는 Mapbox에서 발급받은 액세스 토큰을 입력해야 합니다. 그리고 lnglat 변수에는 지도의 중심 좌표, zoomLevel 변수에는 지도의 줌 레벨을 지정해야 합니다. 마지막으로 'path/to/your/geojson' 부분에는 준비한 GeoJSON 데이터의 경로를 입력해야 합니다.

위 스크립트 코드를 HTML 문서에 추가한 후, 해당 HTML 파일을 브라우저에서 실행하면 지정된 바운더리가 표시된 Mapbox 지도를 확인할 수 있습니다.

마치며

Mapbox를 사용하면 지도에 바운더리를 표시하여 특정 지역을 강조하거나, 지역 내에서 다양한 작업을 수행할 수 있습니다. GeoJSON 형식의 데이터를 준비하여 위의 방법을 따라 코드를 작성하면 쉽게 바운더리를 지도에 표시할 수 있습니다.