[javascript] 사용자 위치 전달받아 Mapbox지도에 마커 표시하기

22 Nov 2023

javascript

Mapbox는 사용자의 위치 정보를 기반으로 지도를 표시하는 기능을 제공합니다. 이 글에서는 Javascript를 사용하여 사용자의 위치를 전달받고, Mapbox 지도에 마커를 표시하는 방법에 대해 알아보겠습니다.

필요한 리소스

먼저, Mapbox를 사용하기 위해 필요한 리소스를 다운로드하거나 CDN을 통해 불러와야 합니마. 아래의 코드를 HTML의 head 태그 안에 추가하세요.

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

사용자 위치 전달받기

사용자의 위치 정보를 받기 위해서는 navigator.geolocation 객체를 사용할 수 있습니다. 아래의 코드는 사용자의 위치를 받아오는 함수를 정의한 예제입니다.

function getGeolocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showMap);
  } else {
    console.error("Geolocation is not supported by this browser.");
  }
}

function showMap(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  // 여기서 얻은 위도(latitude)와 경도(longitude)를 이용하여 지도에 마커를 표시합니다.
}

Mapbox 지도 생성하기

showMap 함수에서 받아온 사용자의 위치 정보를 기반으로 Mapbox 지도를 생성합니다. 아래의 코드는 Mapbox 지도를 생성하고, 사용자의 위치에 마커를 표시하는 예제입니다.

function showMap(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;

  // Mapbox 지도 생성
  mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude],
    zoom: 12
  });

  // 마커 생성
  const marker = new mapboxgl.Marker()
    .setLngLat([longitude, latitude])
    .addTo(map);
}

위의 코드에서 YOUR_MAPBOX_ACCESS_TOKEN을 실제로 발급받은 Mapbox access token으로 바꿔야 합니다.

실행하기

위의 코드를 HTML 문서에 추가하고, 사용자의 위치 정보를 받아와서 Mapbox 지도에 마커를 표시하도록 getGeolocation 함수를 호출해보세요.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet" />
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      function getGeolocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showMap);
        } else {
          console.error("Geolocation is not supported by this browser.");
        }
      }

      function showMap(position) {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;

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

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

      getGeolocation();
    </script>
  </body>
</html>

위의 코드를 실행하면 사용자의 위치를 기반으로 Mapbox 지도가 생성되고, 마커가 표시됩니다. 사용자의 위치 정보를 얻는 데 실패하거나, Mapbox 지도를 표시하는 데 문제가 발생한다면 콘솔을 확인해보세요.

마무리

이번에는 Javascript를 사용하여 사용자의 위치 정보를 받고, Mapbox 지도에 마커를 표시하는 방법을 알아보았습니다. Mapbox를 사용하면 다양한 지도 관련 기능을 구현할 수 있으니, API 문서를 참고하여 원하는 기능을 추가해보세요.

필요한 리소스

사용자 위치 전달받기

Mapbox 지도 생성하기

실행하기

마무리

참고 자료