[javascript] 자바스크립트를 활용하여 Mapbox지도에서 위치 측정하기

22 Nov 2023

javascript

이번 블로그 포스트에서는 자바스크립트를 사용하여 Mapbox 지도에서 위치를 측정하는 방법에 대해 알아보겠습니다.

Mapbox API 사용하기

먼저, Mapbox API를 사용하기 위해 Mapbox 계정을 생성해야 합니다. Mapbox는 지도 및 위치 기반 서비스를 제공하는 플랫폼으로, 개발자들이 간단하게 지도를 사용할 수 있게 해줍니다.

Mapbox 계정을 생성하고 로그인한 후, Mapbox Studio에서 새로운 지도 스타일을 생성해야 합니다. 원하는 지도 스타일을 선택하고, 스타일 URL을 가져옵니다.

HTML 파일 생성하기

다음으로, 위치 측정 기능을 구현하기 위해 HTML 파일을 생성해야 합니다. HTML 파일을 만들고, script 태그 내에 자바스크립트 코드를 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox Location Measurement</title>
    <style>
        body { margin: 0; padding: 0; }
        #map { height: 400px; width: 100%; }
    </style>
    <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" />
</head>
<body>
    <div id="map"></div>

    <script>
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'YOUR_MAP_STYLE_URL',
            center: [0, 0],
            zoom: 2
        });

        map.on('click', function (e) {
            console.log('Clicked at:', e.lngLat);
        });
    </script>
</body>
</html>

위 코드에서 YOUR_MAPBOX_ACCESS_TOKEN과 YOUR_MAP_STYLE_URL을 자신의 Mapbox 액세스 토큰과 스타일 URL로 변경해야 합니다.

위 코드에서는 Mapbox GL JS를 사용하여 지도를 표시하고, click 이벤트를 등록하여 지도를 클릭할 때 좌표를 측정하도록 설정했습니다.

결과 확인하기

HTML 파일을 저장하고 웹 브라우저에서 열면, 지도와 함께 측정된 위치의 좌표가 콘솔에 출력됩니다. 지도를 클릭하면 해당 위치의 좌표가 콘솔에 표시됩니다.

Result

마무리

이렇게 자바스크립트를 사용하여 Mapbox 지도에서 위치를 측정하는 방법을 알아보았습니다. Mapbox의 다양한 기능과 API를 활용하면 위치 기반 서비스를 쉽게 구현할 수 있습니다.

추가로, Mapbox API 문서 및 예제 코드를 참조하면 더욱 다양한 기능을 활용할 수 있습니다.

위의 링크들을 통해 더 많은 정보를 얻을 수 있습니다.