[javascript] 자바스크립트를 이용한 Mapbox 지도의 줌 인/아웃 제어하기

22 Nov 2023

javascript

오늘은 자바스크립트를 이용하여 Mapbox 지도에서 줌 인과 줌 아웃을 제어하는 방법에 대해 알아보겠습니다. Mapbox는 오픈 소스 맵핑 플랫폼으로, 자바스크립트를 통해 맵 제어 및 상호작용을 할 수 있습니다.

Mapbox 지도 줌 인/아웃 버튼 만들기

먼저, Mapbox GL JS를 사용하여 지도를 생성해야합니다. 다음은 Mapbox GL JS를 이용한 간단한 지도 생성 예제입니다.

// 토큰 및 지도 옵션 설정
mapboxgl.accessToken = 'your-mapbox-access-token';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [longitude, latitude],
  zoom: 10
});

이제 지도 위에 줌 인과 줌 아웃 버튼을 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox 지도 줌 인/아웃 제어하기</title>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <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>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        .mapboxgl-ctrl-group { display: none; }
        .mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-zoom-out { display: inline-block; background-color: #fff; border: 1px solid #ccc; border-radius: 2px; font-size: 22px; line-height: 0.8; padding: 1px; cursor: pointer; }
        .mapboxgl-ctrl-zoom-in { margin-bottom: 10px; }
    </style>
</head>
<body>
    <div id='map'></div>
    <div class='mapboxgl-ctrl-top-right'>
        <div class='mapboxgl-ctrl-group'>
            <button class='mapboxgl-ctrl-zoom-in' type='button' onclick='zoomIn()'>+</button>
            <button class='mapboxgl-ctrl-zoom-out' type='button' onclick='zoomOut()'>-</button>
        </div>
    </div>
    <script>
        // 토큰 및 지도 옵션 설정
        mapboxgl.accessToken = 'your-mapbox-access-token';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [longitude, latitude],
            zoom: 10
        });

        // 줌 인 함수
        function zoomIn() {
            map.zoomIn();
        }

        // 줌 아웃 함수
        function zoomOut() {
            map.zoomOut();
        }
    </script>
</body>
</html>

위의 예제에서는 mapboxgl-ctrl-zoom-in 클래스를 가진 줌 인 버튼과 mapboxgl-ctrl-zoom-out 클래스를 가진 줌 아웃 버튼을 생성하였습니다. 버튼을 클릭할 때마다 zoomIn() 또는 zoomOut() 함수가 호출되어 지도의 줌 레벨이 조정됩니다.

결론

이번 포스트에서는 자바스크립트를 이용하여 Mapbox 지도에서 줌 인과 줌 아웃을 제어하는 방법을 알아보았습니다. Mapbox를 사용하면 사용자가 지도를 더 편리하게 조작할 수 있으므로, 웹 애플리케이션 또는 모바일 앱에서 유용하게 활용될 수 있습니다.

더 자세한 정보는 Mapbox GL JS documentation을 참조하시기 바랍니다.