[javascript] 자바스크립트를 이용한 Mapbox지도의 특정 위치에 라벨 추가하기

22 Nov 2023

javascript

Mapbox는 오픈 소스 맵 플랫폼으로, 개발자들은 Mapbox를 사용하여 사용자 정의 지도를 만들고 데이터를 시각화할 수 있습니다.이 포스트에서는 자바스크립트를 사용하여 Mapbox지도의 특정 위치에 라벨을 추가하는 방법을 알아보겠습니다.

1. Mapbox 계정 설정하기

Mapbox를 사용하기 위해서는 먼저 Mapbox 홈페이지에서 계정을 만들어야 합니다. 계정을 만들고 로그인한 후에는 Mapbox 기능과 API를 사용할 수 있습니다.

2. Mapbox 스크립트 추가하기

맵에서 라벨을 추가하기 위해 Mapbox 스크립트를 HTML 문서에 추가해야 합니다. <head> 태그 안에 다음 스크립트를 추가합니다.

<head>
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css' rel='stylesheet' />
</head>

3. Mapbox 지도 생성하기

Mapbox 스크립트를 추가한 후에는 자바스크립트 코드로 지도를 생성해야 합니다. <body> 태그 안에 다음 스크립트를 추가합니다.

<script>
  mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
  
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11', // 지도 스타일 설정
    center: [longitude, latitude], // 라벨을 추가할 위치의 경도와 위도
    zoom: 12 // 지도의 초기 확대/축소 레벨
  });
</script>

YOUR_ACCESS_TOKEN은 Mapbox에서 발급 받은 액세스 토큰으로 대체해야 합니다.

4. 라벨 추가하기

라벨을 지도에 추가하려면 mapboxgl.Marker()를 사용해야 합니다. 다음 자바스크립트 코드를 <script> 태그 안에 추가합니다.

<script>
  const marker = new mapboxgl.Marker()
    .setLngLat([longitude, latitude]) // 라벨을 추가할 위치의 경도와 위도
    .setHTML('<h3>This is a label</h3>') // 라벨 내용 설정
    .addTo(map);
</script>

setHTML() 함수 내에서 라벨의 내용을 원하는 대로 수정할 수 있습니다.

5. 결과 확인하기

마지막으로, HTML 문서의 <body> 태그 안에 Mapbox를 표시할 <div> 태그를 추가합니다.

<div id='map' style='width: 100%; height: 500px;'></div>

높이와 너비는 원하는 값으로 조정할 수 있습니다.

위의 단계를 모두 완료하고 HTML 파일을 열면 Mapbox지도에 특정 위치에 라벨이 추가된 것을 확인할 수 있습니다.

이제 자바스크립트를 사용하여 Mapbox지도에 라벨을 추가하는 방법을 배웠습니다. 이를 응용하여 더 복잡한 기능을 구현할 수 있습니다. Mapbox에 대한 자세한 내용과 API 문서는 Mapbox 공식 문서를 참조하시기 바랍니다.