[javascript] 자바스크립트를 이용한 Mapbox지도의 스타일 변경하기

22 Nov 2023

javascript

Mapbox는 웹 기반 지도 플랫폼으로, 많은 사이트와 앱에서 지도를 표현하는 데 사용됩니다. Mapbox에서 제공하는 기능 중 하나는 지도의 스타일을 사용자 정의할 수 있는 기능입니다. 이 기능을 사용하여 지도의 디자인을 변경하거나 사용자의 요구에 맞게 맞춤형 스타일을 만들 수 있습니다.

이번 튜토리얼에서는 자바스크립트를 사용하여 Mapbox의 지도 스타일을 변경하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 생성 및 액세스 토큰 가져오기

Mapbox를 사용하려면 먼저 Mapbox 계정을 생성해야 합니다. 계정을 생성한 후, 개발 대시보드에서 액세스 토큰을 가져옵니다. 이 토큰은 자바스크립트 코드에서 Mapbox API에 액세스할 때 필요합니다.

2. HTML 파일 생성

다음으로 HTML 파일을 생성하여 Mapbox 지도를 표시할 준비를 합니다. 아래는 간단한 HTML 템플릿입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Mapbox Style Change</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet" />
  <script src="script.js"></script>
</body>
</html>

위의 코드에서는 Mapbox GL JS의 지도를 표시할 div 요소를 추가하고, Mapbox GL JS 및 스타일을 설정하기 위한 스크립트를 로드합니다.

3. 자바스크립트 코드 작성

이제 스타일을 변경하기 위한 자바스크립트 코드를 작성합니다. “script.js” 파일을 생성한 후 다음 코드를 추가합니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11', // 기본 스타일
  center: [lng, lat], // 지도 중심 좌표
  zoom: 12 // 지도 줌 레벨
});

// 스타일 변경 함수
function changeStyle() {
  map.setStyle('mapbox://styles/mapbox/outdoors-v11'); // 변경할 스타일
}

// 버튼 클릭 이벤트에 스타일 변경 함수 연결
document.getElementById('change-style-btn').addEventListener('click', changeStyle);

위의 코드에서 ‘YOUR_ACCESS_TOKEN’ 부분을 앞서 얻은 Mapbox 액세스 토큰으로 대체해야 합니다. mapboxgl.Map 생성자 함수를 사용하여 지도 객체를 생성하고, map.setStyle 함수로 스타일을 변경합니다. 마지막으로, 버튼 클릭 이벤트에 스타일 변경 함수를 연결합니다.

4. CSS 스타일 변경

마지막으로 CSS 파일에 스타일을 추가하여 지도의 표시를 조정할 수 있습니다. 다음 코드를 “style.css” 파일에 추가합니다.

#change-style-btn {
  padding: 10px;
  background-color: #0078d7;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
}

위의 코드에서는 스타일 변경 버튼의 스타일을 지정합니다. 이 스타일은 HTML 파일에서 버튼 요소의 id 값이 change-style-btn인 경우에만 적용됩니다.

실행 및 결과 확인

위의 코드들을 모두 작성한 후, HTML 파일을 브라우저에서 실행하여 결과를 확인할 수 있습니다. 지도가 표시되고 스타일 변경 버튼을 클릭하면 지도의 스타일이 변경되는 것을 볼 수 있습니다.

이제 여러분은 자바스크립트를 사용하여 Mapbox 지도의 스타일을 변경하는 방법을 익혔습니다. 더 많은 Mapbox 기능을 사용하여 지도를 맞춤 설정할 수 있으니 자세한 내용은 Mapbox 공식 문서를 참조하시기 바랍니다.