[javascript] 자바스크립트로 Mapbox 지도의 특정 위치에 팝업 추가하기

22 Nov 2023

javascript

Mapbox는 웹 기반의 지도 및 위치 기반 서비스를 제공하는 플랫폼입니다. 이 플랫폼을 사용하여 웹 사이트나 애플리케이션에서 지도를 표시하고 상호작용할 수 있습니다. 이번 포스트에서는 자바스크립트를 사용하여 Mapbox 지도의 특정 위치에 팝업을 추가해보겠습니다.

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

Mapbox를 사용하기 위해서는 Mapbox 계정을 생성하고 토큰을 발급받아야 합니다. Mapbox 웹사이트에 접속하여 새로운 계정을 생성하고 토큰을 발급받으세요.

2. HTML 파일에 Mapbox 지도 추가

HTML 파일에 Mapbox 지도를 추가하기 위해 다음과 같이 코드를 작성합니다:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Mapbox Example</title>
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    #map {
      width: 100%;
      height: 400px;
    }
  </style>
</head>
<body>
  <div id='map'></div>

  <script>
    mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // 팝업을 추가할 위치의 좌표
      zoom: 12
    });
  </script>
</body>
</html>

위 코드에서 YOUR_MAPBOX_TOKEN 부분에 앞서 발급받은 토큰을 입력하세요. 또한, center: [lng, lat] 부분을 지정하고자 하는 위치의 경도와 위도로 변경하세요.

3. 자바스크립트로 팝업 추가하기

팝업을 추가하기 위해서는 Popup 클래스를 사용해야 합니다. 다음과 같이 자바스크립트 코드를 추가하여 팝업을 생성하고 지도 위에 표시합니다:

var popup = new mapboxgl.Popup()
  .setLngLat([lng, lat]) // 팝업을 추가할 위치의 좌표
  .setHTML("<h3>팝업 제목</h3><p>팝업 내용</p>")
  .addTo(map);

위 코드에서 lng와 lat를 팝업을 추가할 위치의 경도와 위도로 변경하세요. setHTML 메소드의 인자로 팝업의 내용을 HTML 문자열로 지정할 수 있습니다.

4. 결과 확인하기

위 코드를 작성한 뒤 HTML 파일을 열어 지도와 팝업이 제대로 표시되는지 확인해보세요.

이번 포스트에서는 자바스크립트를 사용하여 Mapbox 지도의 특정 위치에 팝업을 추가하는 방법을 알아보았습니다. 자세한 내용은 Mapbox 자바스크립트 API 문서를 참고하세요.

Happy coding!