[javascript] 자바스크립트를 활용하여 Mapbox지도에 실시간 데이터 표시하기

22 Nov 2023

javascript

이번 글에서는 자바스크립트를 사용하여 Mapbox 지도에 실시간 데이터를 표시하는 방법에 대해 알아보겠습니다.

1. Mapbox API 키 생성하기

먼저, Mapbox 지도를 사용하기 위해 Mapbox API 키를 생성해야 합니다. Mapbox 홈페이지에서 계정을 생성하고 API 키를 확인하세요.

2. HTML 파일 생성하기

다음으로, HTML 파일을 생성하고 Mapbox 지도를 표시할 div 요소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mapbox 실시간 데이터 표시</title>
  <style>
    /* Mapbox 지도를 표시할 div의 스타일 설정 */
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <!-- Mapbox SDK 라이브러리 추가 -->
  <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' />

  <!-- 자바스크립트 코드 추가 -->
  <script>
  // 자바스크립트 코드 작성 부분
  </script>
</body>
</html>

3. Mapbox 지도 생성하기

자바스크립트 코드 섹션에 다음 코드를 추가하여 Mapbox 지도를 생성합니다.

// Mapbox API 키 설정
mapboxgl.accessToken = 'YOUR_API_KEY';

// Mapbox 지도 객체 생성
var map = new mapboxgl.Map({
  container: 'map', // Mapbox 지도를 표시할 div 요소의 ID
  style: 'mapbox://styles/mapbox/streets-v11', // 기본 스타일 지정
  center: [longitude, latitude], // 지도의 중심 좌표 설정
  zoom: 12 // 지도의 확대/축소 레벨 설정
});

위 코드에서 YOUR_API_KEY 부분을 생성한 Mapbox API 키로 변경하고, longitude와 latitude를 원하는 지도의 중심 좌표로 수정하세요.

4. 실시간 데이터 표시하기

실시간 데이터를 표시하기 위해 자바스크립트 코드 섹션에 다음 코드를 추가합니다. 이 예시에서는 setInterval 함수를 사용하여 일정 시간마다 데이터를 업데이트하고, Marker 클래스를 사용하여 지도 위에 마커를 표시합니다.

// 실시간 데이터 업데이트 함수
function updateData() {
  // 데이터 업데이트 로직 작성
}

// 일정 시간마다 데이터 업데이트
setInterval(updateData, 5000); // 5초마다 데이터 업데이트

// 데이터를 지도에 표시하는 함수
function displayDataOnMap(data) {
  // 데이터를 사용하여 마커 생성 및 표시
  data.forEach(function(item) {
    var marker = new mapboxgl.Marker()
      .setLngLat([item.longitude, item.latitude])
      .addTo(map);
  });
}

// 초기 데이터 표시
var initialData = []; // 초기 데이터 가져오기
displayDataOnMap(initialData);

위 코드에서 updateData 함수는 실시간 데이터를 업데이트하는 로직을 작성하는 부분입니다. displayDataOnMap 함수는 데이터를 지도에 표시하는 로직을 작성하는 부분입니다. 해당 함수는 초기 데이터 표시와 setInterval 함수에 의해 주기적으로 호출됩니다.

실제 사용하는 데이터에 따라 updateData 함수와 displayDataOnMap 함수를 적절하게 구현해야 합니다.

마무리

이렇게 자바스크립트와 Mapbox API를 활용하여 실시간 데이터를 Mapbox 지도에 표시하는 방법에 대해 알아보았습니다. 실제 사용 시 데이터 업데이트와 표시 로직을 적절히 구현하여 원하는 기능을 구현해보세요.