이번 포스트에서는 자바스크립트를 사용하여 Mapbox 지도에서 투명도를 조절하는 방법을 알아보겠습니다.

Mapbox 지도 API 토큰

Mapbox를 사용하려면 먼저 Mapbox API 토큰이 필요합니다. Mapbox 웹 사이트에서 계정을 만들고 토큰을 생성하세요. 이 토큰은 자바스크립트 코드에서 지도를 로드하는 데 사용됩니다.

HTML 요소 및 스타일 설정

먼저 HTML 파일에 Mapbox 지도를 표시할 <div> 요소를 만들고 고유한 ID를 할당합니다.

<div id="map"></div>

다음으로 스타일 설정을 위해 CSS 파일에 다음과 같은 스타일을 추가합니다.

#map {
  width: 100%;
  height: 400px;
}

자바스크립트 코드 작성

이제 자바스크립트 코드를 작성하여 Mapbox 지도를 생성하고 투명도를 조절해 보겠습니다. 아래 예제 코드를 참고하세요.

// Mapbox API 토큰 설정
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

// Map 객체 생성
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9
});

// Map 로드 완료 이벤트
map.on('load', function() {
  // 투명도 조절을 위한 레이어 ID
  var layerId = 'your-layer-id';

  // 투명도 조절
  map.setPaintProperty(layerId, 'raster-opacity', 0.5);
});

위 코드에서 YOUR_MAPBOX_ACCESS_TOKEN을 생성한 Mapbox API 토큰으로 교체해야 합니다. 또한 your-layer-id를 조절하려는 레이어의 ID로 변경해야 합니다.

map.on('load', ...) 이벤트 핸들러 함수 내에서 map.setPaintProperty()를 사용하여 원하시는 투명도로 설정할 수 있습니다. 코드에서는 raster-opacity 속성을 사용하여 투명도를 조절하였습니다.

결과 확인

위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 실행해보세요. 지도가 로드되고 투명도가 조절된 것을 확인할 수 있을 것입니다.

추가로 원하는 투명도 값을 시도해 보고 결과를 확인해보세요. 투명도 값은 0에서 1 사이의 값으로 설정할 수 있습니다.

결론

이번 포스트에서는 자바스크립트를 활용하여 Mapbox 지도의 투명도를 조절하는 방법을 알아보았습니다. 이를 통해 웹 애플리케이션에서 Mapbox 지도의 시각 효과를 더욱 다양하게 표현할 수 있습니다.

다양한 Mapbox API 문서를 참고하여 더 많은 기능을 활용해 보세요.