[javascript] 자바스크립트와 Mapbox API를 이용한 반응형 지도 개발 방법

22 Nov 2023

javascript

지도는 웹 애플리케이션에서 매우 중요한 요소 중 하나입니다. 최근에는 반응형 웹 디자인이 주류가 되면서 반응형 지도 개발도 중요하게 다뤄지고 있습니다. 이번 포스트에서는 자바스크립트와 Mapbox API를 사용하여 반응형 지도를 개발하는 방법에 대해 알아보겠습니다.

1. Mapbox 계정 만들기

Mapbox는 인터랙티브한 지도와 위치 기반 애플리케이션을 개발할 수 있는 웹 서비스입니다. 먼저 Mapbox 사이트로 이동하여 계정을 만들어야 합니다. 계정을 만들고 로그인한 후, Mapbox Studio로 이동하여 자신의 지도를 생성합니다. 생성한 지도의 스타일 URL을 복사해둡니다.

2. HTML 파일 생성하기

다음으로 HTML 파일을 생성합니다. 아래 코드를 복사하여 HTML 파일의 내용으로 붙여넣습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>반응형 지도</title>
    <style>
        #map {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

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

    <script>
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'YOUR_MAPBOX_STYLE_URL',
            center: [longitude, latitude],
            zoom: 10
        });
    </script>
</body>
</html>

위 코드에서 YOUR_MAPBOX_ACCESS_TOKEN을 자신의 Mapbox 액세스 토큰으로 변경하고, YOUR_MAPBOX_STYLE_URL을 앞에서 생성한 지도의 스타일 URL로 변경합니다.

3. 자바스크립트 파일 생성하기

마지막으로 자바스크립트 파일을 생성하여 반응형 지도를 제어할 수 있는 기능을 추가합니다. 아래 코드를 복사하여 자바스크립트 파일의 내용으로 붙여넣습니다.

window.addEventListener('DOMContentLoaded', (event) => {
    // 화면 크기 변경 감지
    window.addEventListener('resize', function () {
        // 반응형 지도 크기 조정
        var mapElement = document.getElementById('map');
        mapElement.style.height = window.innerHeight + 'px';
    });

    // 초기 지도 크기 설정
    var mapElement = document.getElementById('map');
    mapElement.style.height = window.innerHeight + 'px';

    // 지도 로드 완료 후, 초기 위치 설정
    map.on('load', function () {
        // 초기 위치 설정
        map.setCenter([longitude, latitude]);
    });
});

위 코드에서 longitude와 latitude 부분을 원하는 초기 위치로 변경합니다.

4. 실행 및 확인

HTML 파일을 실행하여 반응형 지도를 확인할 수 있습니다. 화면 크기를 변경하면 지도의 크기도 조정되는 것을 확인할 수 있습니다. 초기 위치도 longitude와 latitude 값에 따라 지도의 중심이 설정됩니다.

이렇게 자바스크립트와 Mapbox API를 이용하여 반응형 지도를 개발할 수 있습니다. Mapbox의 다양한 기능과 API를 사용하여 지도에 마커, 경로, 다중 지점 등을 추가할 수도 있습니다. 자세한 내용은 Mapbox 공식 문서를 참고하시기 바랍니다.