[javascript] 자바스크립트를 활용하여 Mapbox지도에 경로 표시하기
Mapbox는 인기 있는 지도 서비스 제공 업체 중 하나로, 자바스크립트를 활용하여 지도 및 경로를 표시할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 사용하여 Mapbox 지도에 경로를 표시하는 방법에 대해 알아보겠습니다.
1. Mapbox API 키 발급
먼저, Mapbox API 키를 발급해야 합니다. Mapbox의 공식 웹사이트에서 회원 가입 후 키를 생성할 수 있습니다. 생성된 키를 사용하여 JavaScript 코드에서 Mapbox API를 호출할 수 있습니다.
2. HTML 파일 생성
HTML 파일을 생성하고, Mapbox JavaScript 라이브러리를 로드합니다. 아래는 기본적인 HTML 파일 구조의 예시입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox 경로 표시</title>
<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>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
// TODO: 자바스크립트 코드 작성
</script>
</body>
</html>
3. 자바스크립트 코드 작성
지도를 표시하고 경로를 표시할 자바스크립트 코드를 작성합니다. 아래는 기본적인 코드 구조의 예시입니다.
mapboxgl.accessToken = '<your-api-key>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [longitude, latitude],
zoom: 12
});
var marker = new mapboxgl.Marker()
.setLngLat([longitude, latitude])
.addTo(map);
var coordinates = [
[longitude1, latitude1],
[longitude2, latitude2],
// 경로 좌표들 추가
];
var route = new mapboxgl.LineString(coordinates);
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
properties: {},
geometry: route
}
},
layout: {
'line-join': 'round',
'line-cap': 'round'
},
paint: {
'line-color': '#888',
'line-width': 8
}
});
<your-api-key> 부분을 발급받은 Mapbox API 키로 대체하고, longitude, latitude 및 coordinates는 경로와 관련된 좌표값으로 설정해야 합니다.
4. 결과 확인
HTML 파일을 웹 브라우저로 열어서 결과를 확인합니다. 지정한 경로가 Mapbox 지도에 표시되어야 합니다.
결론
본 포스트에서는 자바스크립트를 활용하여 Mapbox 지도에 경로를 표시하는 방법에 대해 알아보았습니다. Mapbox API 키를 발급하고 HTML 파일에 Mapbox JavaScript 라이브러리를 로드한 후, 자바스크립트 코드를 작성하여 지도에 경로를 표시할 수 있습니다. 이를 활용하여 다양한 지도 애플리케이션을 개발할 수 있습니다.