맵박스(Mapbox)는 인기있는 오픈소스 맵핑 플랫폼입니다. 맵박스 SDK를 사용하면 자바스크립트로 지도에 다양한 기능을 추가할 수 있습니다. 이번 포스트에서는 자바스크립트로 맵박스 지도에 커스텀 마커를 추가하는 방법을 알아보겠습니다.

1. 맵박스 API 키 생성하기

먼저, 맵박스에서 API 키를 생성해야 합니다. 맵박스 개발자 포털에 가입한 후, 개발자 대시보드에서 API 키를 생성하세요. 이 API 키는 맵박스 SDK를 사용하기 위해서 필요합니다.

2. 필요한 파일 추가하기

맵박스 SDK를 사용하기 위해 필요한 파일들을 추가해야 합니다. HTML 파일의 head 태그 안에 다음과 같이 스크립트를 추가하세요.

<script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet" />

3. HTML 구조 설정하기

맵박스 지도를 보여줄 HTML 요소를 준비해야 합니다. 다음과 같이 div 태그를 사용하여 지도를 감싸는 컨테이너를 만드세요.

<div id="map"></div>

4. 자바스크립트로 맵박스 지도 초기화하기

다음으로, 자바스크립트 코드를 사용해 맵박스 지도를 초기화합니다. 앞서 생성한 API 키를 사용해야 합니다. 다음은 초기화를 위한 코드입니다.

mapboxgl.accessToken = 'YOUR_API_KEY';

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

위 코드에서 YOUR_API_KEY를 생성한 API 키로 대체해야 합니다. longitude와 latitude는 지도의 중심 좌표를 나타냅니다.

5. 커스텀 마커 추가하기

이제 커스텀 마커를 추가할 차례입니다. 다음 코드를 사용하여 커스텀 마커를 생성하고 지도에 추가하세요.

const marker = new mapboxgl.Marker({
  color: '#FF0000',
  draggable: true
}).setLngLat([longitude, latitude])
  .addTo(map);

위 코드에서 color는 마커의 색상을 지정하고, draggable은 마커를 드래그할 수 있는지 여부를 나타냅니다. setLngLat 메소드의 인자로 마커의 좌표를 전달합니다.

6. 결과 확인하기

위의 단계를 모두 완료하면 맵박스 지도에 커스텀 마커가 추가됩니다. 마커를 드래그하면 위치가 변경되는 것을 확인할 수 있습니다.

참고 자료

• Mapbox 개발자 포털
• Mapbox GL JS API 문서