[javascript] 자바스크립트를 이용한 Mapbox지도에서 측정 결과 공유하기

22 Nov 2023

javascript

이번 블로그 포스트에서는 Mapbox지도와 JavaScript를 사용하여 측정 결과를 공유하는 방법을 알아보겠습니다.

1. Mapbox 계정 만들기

Mapbox를 사용하기 위해서는 먼저 Mapbox 계정이 필요합니다. Mapbox 웹사이트에 가입하여 계정을 만들어주세요. 계정을 만든 후에는 액세스 토큰을 받을 수 있습니다.

2. Mapbox API 사용하기

Mapbox API를 사용하여 지도를 생성하고 측정 기능을 추가할 수 있습니다. 다음과 같이 Mapbox API를 사용하는 JavaScript 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css', rel='stylesheet' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { height: 100vh; width: 100%; }
    </style>
</head>
<body>
<div id='map'></div>
<script>
    mapboxgl.accessToken = 'Your Access Token';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [longitude, latitude],
        zoom: 10
    });

    // 지도에 마커 추가하기
    var marker = new mapboxgl.Marker()
        .setLngLat([longitude, latitude])
        .addTo(map);

    // 측정 결과 공유하기
    function shareMeasurement() {
        var measurementData = {
            distance: 10, // 측정 거리 (예시)
            time: 20, // 측정 시간 (예시)
            speed: 30 // 평균 속도 (예시)
        };

        var shareUrl = 'https://example.com/measurement?' + encodeURIComponent(JSON.stringify(measurementData));
        console.log('공유 URL:', shareUrl);
    }

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

위 코드에서 ‘Your Access Token’ 부분에 앞서 받은 Mapbox 액세스 토큰을 입력해야 합니다. 또한, ‘longitude’와 ‘latitude’에는 마커를 추가할 위치의 위도와 경도 값을 입력해야 합니다.

3. 측정 결과 공유하기

위 예제 코드에서는 shareMeasurement 함수를 사용하여 측정 결과를 공유할 수 있습니다. 이 함수는 measurementData 객체를 생성하여 측정 결과를 담은 후, URL의 쿼리 매개변수로 전달될 공유 URL을 생성합니다.

예를 들어, 측정 거리가 10, 측정 시간이 20, 평균 속도가 30으로 측정된다면, 생성된 공유 URL은 다음과 같습니다.

https://example.com/measurement?{"distance":10,"time":20,"speed":30}

이제 위 예제 코드를 실행하면 Mapbox지도가 생성되고 마커가 추가됩니다. shareMeasurement 함수를 호출하면 공유 URL이 콘솔에 출력됩니다.

위 예제 코드는 Mapbox API를 사용하여 JavaScript로 측정 결과를 공유하는 간단한 예시입니다. 실제로는 서버와 클라이언트 간의 통신을 통해 공유된 결과를 저장하고 공유해야 할 수도 있습니다. 여기에는 추가적인 개발이 필요합니다.