[javascript] 자바스크립트를 이용한 Mapbox지도에서 시각화 기능 추가하기

22 Nov 2023

javascript

이번 포스트에서는 자바스크립트를 사용하여 Mapbox 지도에 다양한 시각화 기능을 추가하는 방법을 알아보겠습니다.

1. Mapbox 계정 생성 및 토큰 발급

먼저, Mapbox 지도를 사용하기 위해서는 Mapbox 계정을 생성하고, 토큰을 발급받아야 합니다. 토큰은 API 요청과 인증에 사용됩니다. Mapbox 계정을 생성한 후, 토큰을 안전한 장소에 보관해주세요.

2. 자바스크립트 파일 추가하기

HTML 파일에 다음과 같이 자바스크립트 파일을 추가해주세요.

<!DOCTYPE html>
<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' />
</head>
<body>
  <div id='map' style='width: 100%; height: 400px;'></div>

  <script>
    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

    // Mapbox 기능 추가 코드 작성
  </script>
</body>
</html>

YOUR_ACCESS_TOKEN 부분에 발급받은 토큰을 넣어주세요.

3. 지도 생성하기

Mapbox 지도를 생성하기 위해 다음과 같이 코드를 작성해보겠습니다.

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

lng과 lat은 위도와 경도 값으로, 원하는 위치를 지정할 수 있습니다.

4. 데이터 시각화하기

맵 위에 데이터를 시각화하기 위해서는 Mapbox GL JS의 다양한 기능을 활용할 수 있습니다. 예를 들어, 다음과 같이 GeoJSON 데이터를 사용하여 점(Point)을 표시할 수 있습니다.

// 데이터 시각화
map.on('load', function() {
  map.addSource('markers', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: {},
          geometry: {
            type: 'Point',
            coordinates: [lng, lat]
          }
        }
      ]
    }
  });

  map.addLayer({
    id: 'markers',
    type: 'circle',
    source: 'markers',
    paint: {
      'circle-color': '#ff0000',
      'circle-radius': 8
    }
  });
});

위 코드에서 lng과 lat은 점의 위치를 나타냅니다. 시각화를 원하는 데이터에 맞게 GeoJSON 형식으로 데이터를 구성해주세요.

이처럼 자바스크립트를 사용하여 Mapbox 지도에 시각화 기능을 추가할 수 있습니다. 더 다양한 시각화 기능을 적용하려면 Mapbox GL JS 문서를 참고해주세요.