[javascript] Mapbox 지도에 사용자 정의 레이어 추가하기
Mapbox는 사용자 정의 레이어를 추가하여 지도에 개인화된 기능을 추가할 수 있는 강력한 맵핑 플랫폼입니다. 이 튜토리얼에서는 JavaScript를 사용하여 Mapbox 지도에 사용자 정의 레이어를 추가하는 방법을 알아보겠습니다.
1. Mapbox 계정 만들기
Mapbox를 사용하기 위해 먼저 Mapbox 계정을 만들어야 합니다. Mapbox 웹사이트로 이동하여 계정을 만들거나 로그인하세요.
2. Mapbox API 액세스 토큰 가져오기
Mapbox 계정을 만들고 로그인한 후에는 API 액세스 토큰을 가져와야 합니다. 이 토큰은 JavaScript 애플리케이션에서 Mapbox 서비스에 액세스할 때 사용됩니다.
- Mapbox 웹사이트에 로그인한 후 Account로 이동하세요.
- 왼쪽 탐색 메뉴에서 “Tokens”를 선택합니다.
- “Default public token”을 확인하거나 생성하세요. 이 토큰을 복사하여 사용할 수 있습니다.
3. HTML 파일 생성 및 Mapbox 라이브러리 포함
- 원하는 디렉토리에 HTML 파일을 생성합니다.
- 다음 코드를 HTML 파일의
<head>태그에 추가하여 Mapbox 라이브러리를 가져옵니다.
<script src="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css" rel="stylesheet" />
4. Mapbox 지도 생성
- HTML 파일의
<body>태그에<div id="map"></div>를 추가하여 지도를 표시할 공간을 만듭니다. - JavaScript 코드를 HTML 파일에 추가하여 Mapbox 지도 객체를 생성합니다. 아래 코드에서
YOUR_MAPBOX_TOKEN을 이전에 가져온 API 액세스 토큰으로 대체하세요.
mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude, latitude],
zoom: 10
});
위 코드에서 longitude와 latitude을 지도의 중심 좌표로 설정해야 합니다. 사용할 지도 스타일을 style 속성에서 선택할 수도 있습니다.
5. 사용자 정의 레이어 추가
이제 사용자 정의 레이어를 추가하여 Mapbox 지도에 개인화된 기능을 추가할 수 있습니다. 예를 들어, 지도에 사용자 위치를 표시하는 마커를 추가할 수 있습니다.
var marker = new mapboxgl.Marker()
.setLngLat([longitude, latitude])
.addTo(map);
longitude와 latitude은 마커의 좌표입니다. 사용자 위치를 동적으로 업데이트하려면 해당 좌표를 변경하면 됩니다. 또한, 마커의 모양, 색상 및 기타 속성을 사용자 정의할 수도 있습니다.
6. 결과 확인하기
HTML 파일을 웹브라우저에서 열어서 Mapbox 지도에 사용자 정의 레이어가 추가되었는지 확인하세요. 사용자 위치 마커가 표시되어야 합니다.