지도에 이동하는 애니메이션은 사용자에게 원활한 경험을 제공하고 지도를 효과적으로 탐색할 수 있는 기능입니다. 이번 블로그 포스트에서는 자바스크립트와 Mapbox를 이용하여 지도에 이동 애니메이션을 적용하는 방법에 대해 알아보겠습니다.
개요
Mapbox는 오픈 소스 맵 플랫폼으로, 지도 기능을 쉽게 추가할 수 있도록 도와줍니다. 이를 이용하여 자바스크립트 코드를 작성하면 지도에 다양한 기능을 추가할 수 있습니다. 이번 예제에서는 Mapbox GL JS를 사용하여 지도를 생성하고, 그 위에 이동 애니메이션을 적용해보겠습니다.
준비물
- Mapbox 계정
- Mapbox GL JS 라이브러리
지도 생성하기
<script src='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css' rel='stylesheet' />
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: 12
});
</script>
지도를 생성하기 위해 mapboxgl.Map을 호출하고, container 속성에는 맵을 표시할 HTML 요소의 id를 지정합니다. style 속성에는 Mapbox에서 제공하는 여러 가지 스타일 중 하나를 선택하여 적용할 수 있습니다. center 속성은 지도의 중심 좌표를, zoom 속성은 지도의 확대/축소 수준을 설정합니다.
이동 애니메이션 적용하기
<script>
const destination = [lng, lat];
map.flyTo({
center: destination,
zoom: 14,
speed: 0.8, // 애니메이션 속도
curve: 1, // 이동 경로의 곡률 (0일 경우 직선 운동)
easing: (t) => t, // 이동 중의 애니메이션 속도 조절 (linear로 설정하면 일정한 속도 유지)
essential: true // 맵 로드 중이거나 이동 애니메이션 중에 간섭되지 않도록 하는 옵션
});
</script>
map.flyTo 함수를 사용하여 이동 애니메이션을 적용할 수 있습니다. center 속성에는 원하는 목적지 좌표를, zoom 속성에는 원하는 확대/축소 수준을 설정합니다. speed 속성을 조절하여 애니메이션의 속도를 설정할 수 있고, curve 속성으로 이동 경로의 곡률을 조절할 수 있습니다. easing 속성은 애니메이션 중의 속도 조절을 위한 함수를 지정할 수 있습니다. essential 속성은 맵이 로드 중이거나 이동 애니메이션 중에 간섭되지 않도록 하는 옵션입니다.
마치며
이번 포스트에서는 자바스크립트와 Mapbox를 이용하여 지도에 이동 애니메이션을 적용하는 방법을 알아보았습니다. 이를 활용하여 사용자에게 원활한 지도 탐색 경험을 제공할 수 있습니다. Mapbox에는 다양한 기능이 제공되므로, 더 많은 기능을 탐구해보시기 바랍니다.