Mapbox는 웹에서 인터랙티브한 지도를 제공하는 플랫폼으로, 다양한 기능과 높은 성능을 제공합니다. 이번 포스트에서는 자바스크립트를 사용하여 Mapbox 지도의 특정 위치에 도형을 표시하는 방법을 알아보겠습니다.
1. Mapbox 계정 생성 및 API 키 발급
Mapbox를 사용하기 위해서는 먼저 Mapbox 계정을 생성하고 API 키를 발급받아야 합니다. Mapbox 공식 홈페이지에서 계정을 생성한 뒤, 계정 설정에서 API 키를 생성해주세요. 이 API 키는 자바스크립트 코드에서 Mapbox 서비스에 접근하기 위해 사용됩니다.
2. HTML 파일 설정
다음으로, 지도를 표시할 HTML 파일을 생성하고 필요한 스타일과 스크립트 파일을 포함시켜야 합니다. 아래는 기본적인 설정을 포함한 HTML 파일의 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox 지도에 도형 표시하기</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
// 자바스크립트 코드 작성 위치
</script>
</body>
</html>
위 코드에서는 Mapbox의 스타일 및 스크립트 파일을 가져와 주소를 설정하였습니다. 지도를 표시할 div 요소에는 id를 “map”으로 설정하였습니다.
3. 자바스크립트 코드 작성
이제 자바스크립트 코드를 작성하여 Mapbox 지도에 도형을 표시해보겠습니다. 아래는 예시 코드입니다.
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
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);
위 코드에서 ‘YOUR_ACCESS_TOKEN’은 앞서 발급받은 Mapbox API 키로 대체되어야 합니다. center 속성에는 도형을 표시할 위치의 경도와 위도를 설정하고, zoom 속성은 지도의 초기 확대/축소 레벨을 설정합니다. marker 변수는 지도에 표시될 도형을 생성하고, setLngLat() 메소드를 사용하여 도형의 위치를 설정한 뒤, addTo() 메소드를 사용하여 도형을 지도에 추가합니다.
4. 결과 확인
자바스크립트 코드를 작성한 뒤, HTML 파일을 웹 브라우저에서 열어 결과를 확인해보세요. 정확한 위치와 초기 확대/축소 레벨을 설정한 경우, Mapbox 지도에 도형이 표시될 것입니다.