[javascript] 자바스크립트를 활용하여 Mapbox 지도 생성하기

22 Nov 2023

javascript

Mapbox는 웹 기반 지도 플랫폼으로, 자바스크립트를 사용하여 다양한 맵 기능을 구현할 수 있습니다. 이번 포스트에서는 Mapbox를 사용하여 웹 페이지에 지도를 생성하는 방법을 알아보겠습니다.

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

Mapbox를 사용하기 위해서는 먼저 Mapbox 계정을 생성해야 합니다. 계정을 생성한 후, 액세스 토큰을 발급받아야 합니다. 이 토큰은 Mapbox API에 접근할 때 사용됩니다.

2. HTML 파일 생성

먼저 HTML 파일을 생성하고, <div> 요소를 추가하여 지도를 보여줄 영역을 만듭니다.

<!DOCTYPE html>
<html>
<head>
  <title>Mapbox 지도 생성 예제</title>
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.3/mapbox-gl-geocoder.min.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.3/mapbox-gl-geocoder.css' type='text/css' />
  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.min.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.0/mapbox-gl-directions.css' type='text/css' />
  <script>
    mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
  
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // 지도 초기 좌표를 설정합니다.
      zoom: 12 // 초기 축척 레벨을 설정합니다.
    });

    // 이제 지도에 필요한 기능을 추가할 수 있습니다.
  </script>
</body>
</html>

위 코드에서 YOUR_ACCESS_TOKEN 부분을 발급받은 액세스 토큰으로 변경해주셔야 합니다.

3. JavaScript 코드 작성

HTML 파일에서 <script> 태그 안에 자바스크립트 코드를 작성하여 지도에 필요한 기능을 추가할 수 있습니다. 예를 들어, 마커를 추가하고, 기본 이벤트를 설정할 수 있습니다.

var marker = new mapboxgl.Marker()
    .setLngLat([lng, lat]) // 마커의 위치를 설정합니다.
    .addTo(map);

map.on('click', function(e) {
    // 클릭한 위치의 좌표를 출력합니다.
    console.log('Clicked at:', e.lngLat);
});

위 코드에서 lng와 lat 부분을 원하는 경도와 위도 값으로 변경해주셔야 합니다.

4. 지도 스타일 변경

위 코드에서 style 옵션을 원하는 스타일로 변경하면 다른 지도 스타일을 사용할 수 있습니다. Mapbox에서 제공하는 여러 가지 스타일 중 원하는 스타일을 선택할 수 있습니다.

결론

이제 자바스크립트를 사용하여 Mapbox 지도를 생성하는 방법을 알게 되었습니다. Mapbox API를 사용하면 다양한 기능을 지닌 인터랙티브한 맵을 구현할 수 있습니다. Mapbox의 다양한 기능을 활용하여 웹 페이지에 독특하고 유용한 지도를 추가해보세요.

더 자세한 정보는 Mapbox 공식 문서를 참고하시기 바랍니다.