Mapbox는 웹 기반의 인터랙티브한 지도를 제공하는 서비스입니다. 이번 글에서는 Mapbox를 사용하여 동적으로 변하는 데이터를 지도에 표시하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 등록 및 API 토큰 발급하기

Mapbox를 사용하려면 먼저 Mapbox 계정을 등록해야 합니다. 등록 후에는 API 토큰을 발급받아야 합니다. 이 토큰은 Mapbox API를 사용하기 위해 인증에 사용됩니다.

2. HTML 문서에서 Mapbox 지도 표시하기

Mapbox를 사용하여 지도를 표시하기 위해서는 HTML 문서에 Mapbox 스크립트를 추가하고, 지도를 표시할 요소를 추가해야 합니다. 예를 들어, 아래와 같이 div 요소를 추가합니다.

<div id="map" style="width: 100%; height: 400px;"></div>

3. JavaScript 코드를 사용하여 데이터 표시하기

동적으로 변하는 데이터를 지도에 표시하기 위해서는 JavaScript 코드를 사용해야 합니다. Mapbox에서 제공하는 JavaScript 라이브러리를 사용하여 데이터를 처리하고 표시할 수 있습니다.

mapboxgl.accessToken = 'your-access-token';

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

// 데이터 가져오기
fetch('your-api-endpoint')
  .then(response => response.json())
  .then(data => {
    // 데이터를 사용하여 지도에 마커 표시하기
    data.forEach(item => {
      var marker = new mapboxgl.Marker()
        .setLngLat([item.lng, item.lat])
        .addTo(map);
    });
  });

위의 코드에서 your-access-token은 Mapbox API 토큰으로 대체되어야 합니다. your-api-endpoint는 데이터를 가져올 API 엔드포인트 주소로 대체되어야 합니다. lng과 lat는 지도의 초기 중심 좌표를 나타냅니다.

4. 결과 확인하기

위의 코드를 구현한 후 HTML 파일을 실행하면 Mapbox 지도에 동적으로 변하는 데이터가 표시됩니다. 데이터를 가져오고 처리하는 방법은 개발자의 요구에 따라 다르게 구현할 수 있습니다.

결론

Mapbox를 사용하여 동적으로 변하는 데이터를 지도에 표시하는 방법에 대해 알아보았습니다. Mapbox를 활용하면 다양한 데이터를 시각화하여 인터랙티브한 지도를 만들 수 있습니다. 자세한 내용은 Mapbox 공식 문서를 참고하시기 바랍니다.