맵박스(Mapbox)는 지리 정보를 시각화하고 사용자에게 제공할 수 있는 플랫폼입니다. 이를 이용하면 교통량과 같은 정보를 지도 위에 표시할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 Mapbox지도 위에 교통량을 표시하는 방법을 알아보겠습니다.
1. Mapbox 계정과 API 액세스 토큰 생성하기
먼저, Mapbox 계정이 필요합니다. 계정을 만들고 로그인한 후, API 액세스 토큰을 생성해야 합니다. 이 토큰은 Mapbox의 서비스에 접근할 수 있는 인증 수단입니다.
API 액세스 토큰을 생성하는 방법은 Mapbox 공식 문서를 참고하시기 바랍니다.
2. Mapbox 지도 만들기
Mapbox에서 교통량을 표시하기 위해서는 우선 지도를 생성해야 합니다. 아래의 코드는 자바스크립트를 사용하여 Mapbox 지도를 생성하는 예시입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Mapbox Example</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; 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: [126.9780, 37.5665],
zoom: 12
});
</script>
</body>
</html>
위의 코드에서 YOUR_ACCESS_TOKEN 부분에는 앞서 생성한 Mapbox API 액세스 토큰을 넣어야 합니다. 그리고 center와 zoom 값을 변경하여 지도의 초기 위치와 줌 레벨을 조정할 수 있습니다.
3. 교통량 데이터 표시하기
지도를 생성한 후, 교통량 데이터를 표시하기 위해서는 트래픽 데이터 서비스에 대한 액세스 권한이 필요합니다. Mapbox에서는 Traffic API를 통해 교통량 데이터를 제공합니다.
아래의 예시 코드는 Mapbox Traffic API를 사용하여 교통량 데이터를 표시하는 방법을 보여줍니다.
map.on('load', function () {
map.addSource('traffic', {
'type': 'vector',
'url': 'mapbox://mapbox.mapbox-traffic-v1'
});
map.addLayer({
'id': 'traffic',
'source': 'traffic',
'source-layer': 'traffic',
'type': 'line',
'paint': {
'line-color': ['case',
['<', ['get', 'congestion'], 2], 'green',
['<', ['get', 'congestion'], 4], 'yellow',
'red'
],
'line-width': 5
},
'filter': ['==', 'class', 'service']
});
});
위의 코드는 map.on('load', ...) 이벤트 핸들러 내부에서 Traffic API를 추가하고, 교통량 레이어를 생성한 후에 맵에 추가하는 예시입니다. line-color 속성을 조정하여 교통량 상태에 따라 선의 색상을 변경할 수 있습니다.
위의 코드에서 'url': 'mapbox://mapbox.mapbox-traffic-v1' 부분은 Traffic API의 소스 URL입니다. Mapbox에서는 mapbox://mapbox.mapbox-traffic-v1에서 사용 가능한 트래픽 데이터를 제공합니다.
4. 추가적인 설정 및 커스터마이징
맵박스를 사용하여 교통량을 표시하는 방법은 다양하게 커스터마이징할 수 있습니다. 교통량에 대한 색상, 두께 및 다른 스타일을 적용할 수도 있습니다. Mapbox 공식 문서를 참고하여 필요에 따라 추가적인 커스터마이징을 진행해보세요.