실시간 트래픽 정보를 시각적으로 표시하는 것은 많은 웹 애플리케이션에서 유용합니다. Mapbox는 몇 가지 강력한 도구를 제공하여 실시간 트래픽 데이터를 지도 위에 표시할 수 있게 해줍니다. 이번 블로그 포스트에서는 Mapbox지도에서 실시간 트래픽을 표시하는 방법에 대해 알아보겠습니다.
1. Mapbox 계정 생성
먼저, Mapbox 계정을 생성해야 합니다. Mapbox 웹사이트의 홈페이지로 이동하여 계정을 생성할 수 있습니다. 생성된 계정으로 로그인한 후, ‘Styles’ 섹션에서 새로운 스타일을 만듭니다.
2. Mapbox GL JS 사용하기
Mapbox GL JS는 Mapbox의 JavaScript 라이브러리로, 웹 애플리케이션에 대화형 지도를 쉽게 통합할 수 있습니다. 제공되는 스타일을 사용하여 Mapbox GL JS를 설정하고 지도를 표시할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Real-time Traffic with Mapbox</title>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.css" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.5.0/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'your-access-token'; // 자신의 Access Token으로 대체해야 합니다.
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/traffic-night-v2', // 트래픽 스타일 선택
center: [lng, lat],
zoom: 12
});
</script>
</body>
</html>
3. 실시간 트래픽 데이터 표시하기
Mapbox GL JS를 사용하여 지도를 표시하고 설정한 스타일을 적용했다면, 이제 실시간 트래픽 데이터를 표시할 준비가 되었습니다. 실시간 트래픽 데이터는 Mapbox Traffic API를 통해 얻을 수 있습니다. Traffic API에서 주어진 경로의 트래픽 데이터를 가져와서 지도 위에 표시할 수 있습니다.
// 서버 측에서 트래픽 데이터 가져오기
fetch('https://api.mapbox.com/traffic/v1/incidents?access_token=your-access-token')
.then(function(response) {
return response.json();
})
.then(function(data) {
// 데이터를 사용하여 트래픽 표시하기
map.addSource('traffic', {
type: 'geojson',
data: data
});
map.addLayer({
id: 'traffic',
type: 'line',
source: 'traffic',
paint: {
'line-color': 'red',
'line-width': 2
}
});
});
트래픽 데이터를 가져와서 지도에 표시하는 간단한 예제 코드입니다. 실제로는 서버 측에서 주기적으로 데이터를 가져오는 등의 추가 로직이 필요할 수 있습니다.
결론
이제 Mapbox지도에서 실시간 트래픽을 표시하는 방법을 알아보았습니다. Mapbox의 강력한 도구를 사용하면 실시간 트래픽 데이터를 시각적으로 표현하는 웹 애플리케이션을 쉽게 개발할 수 있습니다. 실시간 트래픽 정보를 통해 사용자에게 유용한 서비스를 제공할 수 있습니다.