[javascript] 자바스크립트로 Mapbox 지도에 다른 레이어 추가하기

22 Nov 2023

javascript

Mapbox는 웹에서 사용할 수 있는 대표적인 지도 제공 업체 중 하나입니다. 이 라이브러리를 사용하면 웹 애플리케이션에 다양한 지도 기능을 추가할 수 있습니다. 이번에는 자바스크립트를 사용하여 Mapbox 지도에 다른 레이어를 추가하는 방법에 대해 알아보겠습니다.

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

Mapbox의 기능을 사용하기 위해서는 먼저 Mapbox 계정을 생성하고 액세스 토큰을 발급받아야 합니다. Mapbox 계정을 생성한 후 “Access Tokens” 페이지에서 액세스 토큰을 생성할 수 있습니다.

2. HTML 파일 생성 및 Mapbox 라이브러리 로드

다음으로, HTML 파일을 생성하고 Mapbox 라이브러리를 로드해야 합니다. 아래와 같이 <head> 섹션에 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
<head>
  <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' />
  <style>
    #map {
      width: 800px;
      height: 600px;
    }
  </style>
</head>
<body>
  <div id='map'></div>
  <script>
    // 자바스크립트 코드 작성
  </script>
</body>
</html>

3. Mapbox 지도 생성

자바스크립트 코드 섹션에 다음 코드를 추가하여 Mapbox 지도를 생성합니다.

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: zoomLevel
});

YOUR_ACCESS_TOKEN 부분에는 앞서 생성한 액세스 토큰을 입력합니다.
container는 지도를 표시할 HTML 요소의 id를 지정합니다.
style은 사용할 지도 스타일을 지정합니다. 예시에서는 ‘streets-v11’을 사용합니다.
center는 지도의 초기 중심 좌표를 지정합니다. [lng, lat] 형식으로 입력합니다.
zoom은 지도의 초기 확대/축소 수준을 지정합니다.

4. 다른 레이어 추가하기

Mapbox에서 제공하는 다양한 레이어를 추가할 수 있습니다. 예를 들어, 다음 코드를 추가하여 이미지 레이어를 표시할 수 있습니다.

map.on('load', function () {
  map.addLayer({
    'id': 'image-layer',
    'type': 'raster',
    'source': {
      'type': 'image',
      'url': 'URL_TO_IMAGE',
      'coordinates': [
        [lng1, lat1],
        [lng2, lat2],
        [lng3, lat3],
        [lng4, lat4]
      ]
    },
    'paint': {
      'raster-opacity': 0.85
    }
  });
});

image-layer는 레이어의 고유 id입니다.
type은 레이어의 타입을 지정합니다. 예시에서는 ‘raster’를 사용합니다.
source는 레이어에 사용할 이미지 소스를 지정합니다. ‘image’ 타입의 소스를 사용하며, url에는 이미지의 URL을 입력합니다. coordinates는 이미지를 표시할 좌표를 입력합니다.
paint은 레이어의 스타일을 정의합니다. 여기서는 raster-opacity을 사용하여 이미지의 투명도를 설정합니다.

이와 같이 원하는 다른 레이어를 추가하여 Mapbox 지도에 다양한 시각적 요소를 표시할 수 있습니다.

이제 자바스크립트로 Mapbox 지도에 다른 레이어를 추가하는 방법에 대해 알아봤습니다. Mapbox API 문서를 참조하여 자세한 사용법을 확인할 수 있습니다.