[javascript] 자바스크립트와 Mapbox를 이용한 지도에서 동적 툴팁 추가하기

22 Nov 2023

javascript

지도 애플리케이션을 개발하는데 있어서 툴팁은 매우 유용한 기능입니다. 툴팁은 사용자에게 지도의 특정 위치에 대한 정보를 제공하거나 추가적인 상호작용을 제공하는데 사용될 수 있습니다. 자바스크립트와 Mapbox를 사용하여 동적으로 툴팁을 추가하는 방법에 대해 알아보겠습니다.

1. Mapbox API 키 발급하기

Mapbox는 강력한 지도 서비스를 제공하는 플랫폼입니다. 먼저 Mapbox API 키를 발급받아야 합니다. Mapbox 웹사이트에 가입한 후, 개발자 대시보드에서 API 키를 생성하실 수 있습니다.

2. HTML 파일 생성하기

간단한 HTML 파일을 만들어서 Mapbox를 사용한 지도를 표시할 준비를 해봅시다.

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
    <style>
      #map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken = 'YOUR_MAPBOX_API_KEY';
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-122.4194, 37.7749],
        zoom: 12,
      });
    </script>
  </body>
</html>

위의 코드에서 YOUR_MAPBOX_API_KEY 부분을 발급받은 Mapbox API 키로 대체해야 합니다.

3. 동적 툴팁 추가하기

이제 동적으로 툴팁을 추가해보겠습니다. 툴팁을 추가하려는 원하는 위치에 마커를 생성하고 해당 마커에 툴팁을 연결하는 방식을 사용하겠습니다.

<div id="map"></div>
<script>
  mapboxgl.accessToken = 'YOUR_MAPBOX_API_KEY';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.4194, 37.7749],
    zoom: 12,
  });

  var marker = new mapboxgl.Marker()
    .setLngLat([-122.4194, 37.7749])
    .addTo(map);

  var tooltip = new mapboxgl.Popup({ offset: [0, -15] })
    .setText('Hello, World!')
    .addTo(map);

  marker.setPopup(tooltip);
</script>

위의 코드에서 setLngLat 함수를 사용하여 마커의 위치를 설정하고, setText 함수를 사용하여 툴팁에 표시할 텍스트를 지정합니다. 마지막으로 setPopup 함수를 사용하여 마커에 툴팁을 연결합니다.

4. 마무리

이제 자바스크립트와 Mapbox를 이용하여 지도에 동적 툴팁을 추가하는 방법을 배웠습니다. 이를 응용하여 지도 기반 애플리케이션을 개발하면 사용자에게 더욱 향상된 경험을 제공할 수 있습니다. 자세한 내용은 Mapbox 공식 문서를 참고하시기 바랍니다.

Happy coding!