[javascript] Mapbox지도에서 지역 경계 표시하기
Mapbox는 인기있는 웹 기반 지도 서비스입니다. 이 서비스를 사용하면 자신의 웹 사이트나 애플리케이션에 지도를 추가할 수 있습니다. 이 문서에서는 Mapbox지도에서 특정 지역의 경계를 표시하는 방법에 대해 알아보겠습니다.
1. Mapbox 계정 만들기
Mapbox를 사용하려면 먼저 개발자 계정을 생성해야 합니다. Mapbox 홈페이지에 접속하여 계정을 생성하고 로그인하세요.
2. Mapbox 스타일 만들기
지역 경계를 표시하기 위해 먼저 Mapbox 스타일을 만들어야 합니다. 스타일은 지도의 렌더링 방식을 정의하는 것입니다. Mapbox Studio를 사용하여 스타일을 만들 수 있습니다.
- Mapbox Studio에 접속하여 로그인하세요.
- 새로운 스타일을 만들고 지도의 기본적인 스타일을 설정하세요.
- 지역 경계를 표시하려는 벡터 데이터를 스타일에 추가하세요. 이 데이터는 GeoJSON 형식이어야 합니다. 예를 들어, 행정구역 경계 데이터를 사용하려면 행정구역의 경계가 포함된 GeoJSON 파일을 스타일에 추가하세요.
3. Mapbox GL JS를 사용하여 지도에 스타일 적용하기
Mapbox GL JS는 Mapbox의 JavaScript 라이브러리로, 지도에 인터랙티브한 기능을 추가할 수 있습니다.
- HTML 파일에 Mapbox GL JS의 라이브러리 파일을 추가하세요.
<script src="https://cdn.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link href="https://cdn.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
- JavaScript 코드에서 Mapbox GL JS를 초기화하고 지도를 생성하세요.
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
container: 'map-container',
style: 'mapbox://styles/YOUR_USERNAME/YOUR_STYLE_ID',
center: [longitude, latitude],
zoom: 12
});
- JavaScript 코드에서 스타일에 경계를 표시하는 레이어를 추가하세요.
map.on('load', function() {
map.addLayer({
'id': 'boundary-layer',
'type': 'line',
'source': {
'type': 'vector',
'url': 'mapbox://YOUR_USERNAME.YOUR_BOUNDARY_SOURCE_ID'
},
'source-layer': 'YOUR_BOUNDARY_SOURCE_LAYER',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#ff0000',
'line-width': 2
}
});
});
위의 코드에서 ‘YOUR_ACCESS_TOKEN’, ‘YOUR_USERNAME’, ‘YOUR_STYLE_ID’, ‘YOUR_BOUNDARY_SOURCE_ID’, ‘YOUR_BOUNDARY_SOURCE_LAYER’를 실제 값으로 대체해야 합니다.
4. 결과 확인하기
위의 단계를 완료한 뒤 HTML 파일을 브라우저에서 열어 지도를 확인해 보세요. 설정한 스타일에 따라 특정 지역의 경계가 나타날 것입니다.
위의 예제는 Mapbox를 사용하여 지역 경계를 표시하는 간단한 방법을 보여줍니다. 더 복잡한 경계 스타일링을 적용하거나 다른 데이터 소스를 사용할 수도 있습니다. Mapbox 문서와 예제를 참고하여 원하는 결과를 얻을 수 있습니다.