[javascript] Mapbox과 자바스크립트를 이용한 지도 API 연동 방법

22 Nov 2023

javascript

Mapbox은 오픈 소스 기반의 지도 API 서비스로, 다양한 지리 데이터를 활용하여 맞춤형 지도를 만들 수 있습니다. 이번 글에서는 Mapbox과 자바스크립트를 이용하여 지도 API를 연동하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 생성

Mapbox를 사용하기 위해서는 먼저 Mapbox 웹 사이트에서 계정을 생성해야 합니다. 계정을 생성한 후에는 Mapbox Dashboard에서 자신의 지도 서비스를 관리할 수 있습니다.

2. Mapbox 지도 스타일 설정

Mapbox에서는 자신이 원하는 지도 스타일을 선택할 수 있습니다. Mapbox 스튜디오를 이용하여 지도 스타일을 만들거나 기본 스타일을 사용할 수 있습니다. 스타일을 선택하고 설정한 후에는 해당 스타일의 스타일 URL을 얻어야 합니다.

3. 자바스크립트로 지도 API 연동

이제 자바스크립트로 Mapbox 지도 API를 연동해보겠습니다. 먼저 HTML 파일을 생성하고 다음과 같이 코드를 작성합니다.

<!DOCTYPE html>
<html>

<head>
    <title>Mapbox 지도 예제</title>
    <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_MAPBOX_ACCESS_TOKEN';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/YOUR_USERNAME/YOUR_STYLE_ID',
            center: [longitude, latitude],
            zoom: 10
        });
    </script>
</body>

</html>

위 코드에서 알맞은 값을 설정해야 합니다. YOUR_MAPBOX_ACCESS_TOKEN을 Mapbox Dashboard에서 얻은 액세스 토큰으로 대체하고, YOUR_USERNAME을 자신의 Mapbox 계정 이름으로, YOUR_STYLE_ID를 사용할 스타일의 ID로 변경해야 합니다. 또한 center 속성에 지도를 가운데로 위치시킬 경도(longitude)와 위도(latitude) 값을 입력해야 합니다.

이렇게 설정한 후에 HTML 파일을 웹 브라우저에서 열면 Mapbox 지도가 표시됩니다.

4. 추가적인 설정과 기능

자바스크립트 코드에서 다양한 설정과 기능을 추가할 수 있습니다. 예를 들어, 지도에 마커를 추가하거나, 지도를 드래그하거나 확대/축소하는 등의 사용자 인터랙션을 구현할 수 있습니다. 자세한 내용은 Mapbox API 문서를 참고하십시오.

위의 예제 코드는 Mapbox의 기본적인 사용법을 보여주기 위한 것이며, 실제 사용 시에는 자신의 요구 사항에 맞게 코드를 수정 및 확장해야 합니다.

5. 결론

지도 API는 웹 애플리케이션에서 매우 유용한 기능이며, Mapbox과 자바스크립트를 활용하면 쉽게 지도를 연동할 수 있습니다. 이 글을 통해 지도 API 연동의 기본 방법을 익히고, 필요한 기능을 추가하여 더 풍부한 지도 서비스를 제공할 수 있기를 바랍니다.