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

22 Nov 2023

javascript

지도 API를 사용하여 자바스크립트로 웹 페이지에 Mapbox 지도를 표시하고, 특정 위치에 원을 추가하는 방법을 알아보겠습니다.

1. Mapbox 계정 및 API 키 생성

Mapbox 서비스를 사용하기 위해서는 먼저 Mapbox 계정을 생성해야 합니다. 계정을 생성한 후에는 API 키를 생성하여 받아야 합니다. 이 API 키는 Mapbox 지도를 사용하기 위해 필요한 인증 정보입니다.

2. HTML 파일 생성

다음과 같이 마크업된 HTML 파일을 생성합니다.

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

    <script>
      mapboxgl.accessToken = 'YOUR_API_KEY';

      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [longitude, latitude],
        zoom: 12
      });

      var marker = new mapboxgl.Marker()
        .setLngLat([longitude, latitude])
        .addTo(map);

      var circle = new mapboxgl.Circle()
        .setLngLat([longitude, latitude])
        .setRadius(100)
        .addTo(map);
    </script>
  </body>
</html>

위의 코드에서 YOUR_API_KEY 부분을 생성한 API 키로 대체해야 합니다.

3. 자바스크립트 파일에서 위도와 경도 가져오기

원하는 위치에 원을 추가하기 위해서는 해당 위치의 위도와 경도 값을 알아야 합니다. 이 값을 가져올 수 있는 방법은 여러 가지가 있습니다. 예를 들어, 사용자의 현재 위치를 가져오거나, 주소를 통해 위도와 경도를 변환하는 등의 방법이 있습니다.

아래는 사용자의 현재 위치를 가져오는 예시입니다.

if (navigator.geolocation) {
  // 사용자의 현재 위치를 가져오기
  navigator.geolocation.getCurrentPosition(function (position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    // 위의 코드에서 Mapbox 지도 초기화 부분에 위도와 경도 값을 대입하여 사용하면 됩니다.
  });
} else {
  console.log('지오로케이션을 지원하지 않는 브라우저입니다.');
}

4. 결과 확인하기

위의 코드를 모두 작성하고 HTML 파일을 웹 브라우저에서 열면, Mapbox 지도가 표시되며 원이 원하는 위치에 추가된 것을 확인할 수 있습니다.

이와 같이 자바스크립트로 Mapbox 지도의 특정 위치에 원을 추가하는 방법을 알아보았습니다. 위의 코드를 활용하여 다양한 원의 크기와 스타일을 적용하거나, 다른 기능들을 추가할 수도 있습니다. Mapbox의 공식 문서를 참조하여 더 많은 기능들을 살펴보시기 바랍니다.

참고: 이 예시 코드는 Mapbox GL JS v2.4.0 버전을 기준으로 작성되었습니다.