[javascript] 자바스크립트와 Mapbox를 이용한 지도에서 다른 스타일 추가하기

22 Nov 2023

javascript

지도를 만들고 관리하는데 자바스크립트와 Mapbox를 사용하는 것은 매우 효과적인 방법입니다. Mapbox는 매우 범용적이고 강력한 지도 플랫폼으로, 사용자 정의 스타일을 추가해서 지도를 더욱 개성있게 만들 수 있습니다.

Mapbox 액세스 토큰 생성

먼저, Mapbox에서 액세스 토큰을 생성해야 합니다. 액세스 토큰은 Mapbox 서비스에 연결하고 인증하는 데 사용됩니다. Mapbox 웹사이트에서 계정을 만들고 액세스 토큰을 생성하세요.

HTML 파일 생성

다음으로, HTML 파일을 생성하고 Mapbox 라이브러리를 포함해야 합니다. 아래의 코드를 HTML 파일에 추가하세요.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>지도 스타일 추가하기</title>
  <style>
    #map { width: 100%; height: 600px; }
  </style>
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
  <div id='map'></div>
  
  <script>
    // Mapbox 액세스 토큰 설정
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  
    // 지도 생성
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'YOUR_MAPBOX_STYLE', // 사용자 정의 스타일 링크나 스타일 ID 입력
      center: [longitude, latitude], // 지도 초기 중심 좌표 입력
      zoom: 12 // 초기 줌 레벨 설정
    });
  </script>
</body>
</html>

위의 코드에서 YOUR_MAPBOX_ACCESS_TOKEN과 YOUR_MAPBOX_STYLE을 액세스 토큰과 사용자 정의 스타일로 대체해야 합니다.

지도 스타일 추가하기

Mapbox에서는 스타일을 사용하여 지도의 색상, 아이콘, 레이어 등을 사용자 정의할 수 있습니다. Mapbox Studio를 사용하여 스타일을 만들 수도 있고, Mapbox 문서에서 사전 정의된 스타일을 참조할 수 있습니다.

코드에서 style 속성에 사용자 정의 스타일을 입력하면 됩니다. 예를 들어, 다음과 같은 스타일 링크를 사용할 수 있습니다.

style: 'mapbox://styles/your-username/your-style'

your-username과 your-style은 Mapbox Studio에서 만든 스타일의 사용자 이름과 스타일 이름으로 대체해야 합니다.

마치며

지도에 다양한 스타일을 추가하면 사용자들에게 더욱 직관적이고 매력적인 사용자 경험을 제공할 수 있습니다. 이번 기사에서는 자바스크립트와 Mapbox를 사용하여 지도에 다른 스타일을 추가하는 방법을 알아보았습니다. Mapbox의 다양한 스타일링 기능을 적용하여 웹 애플리케이션의 지도를 더욱 향상시킬 수 있습니다.