[javascript] 자바스크립트를 이용한 Mapbox지도에 마커 표시하기
이번에는 자바스크립트를 사용하여 Mapbox 지도에 마커를 표시하는 방법에 대해 알아보겠습니다.
Mapbox 계정 생성 및 API 키 얻기
먼저, Mapbox 계정을 생성하고 API 키를 얻어야 합니다. Mapbox 웹사이트에 접속하여 계정을 생성하고, 개인 계정을 사용하여 API 키를 생성해야 합니다. 생성된 API 키를 안전하게 보관해 주세요.
HTML 파일 생성하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox 지도에 마커 표시하기</title>
<style>
#map {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
<script src="script.js"></script>
</body>
</html>
위의 코드는 Mapbox 지도를 표시하기 위한 HTML 파일입니다. Mapbox GL JS를 로드하기 위한 <script> 태그와 스타일을 적용하기 위한 <link> 태그를 추가하였습니다. 또한, 지도를 표시할 <div> 태그도 추가하였습니다.
JavaScript 파일 생성하기
mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
// 지도 초기화
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat], // 지도의 중앙 좌표를 설정
zoom: 12 // 지도의 확대 수준을 설정
});
// 마커 추가
var marker = new mapboxgl.Marker()
.setLngLat([lng, lat]) // 마커의 좌표를 설정
.addTo(map);
위의 코드는 script.js 파일에 작성해야 할 자바스크립트 코드입니다. YOUR_ACCESS_TOKEN 부분을 사용자의 Mapbox API 키로 대체해야 합니다. 또한, lng과 lat 변수에는 마커를 표시할 위치의 경도와 위도를 설정해야 합니다. 마지막으로, addTo(map) 메서드를 사용하여 마커를 지도에 추가합니다.
웹사이트 실행하기
위의 HTML 파일과 JavaScript 파일을 작성하고 저장한 후, 웹 브라우저에서 HTML 파일을 실행하면 Mapbox 지도에 마커가 표시됩니다. 지도가 원하는 위치로 중앙에 표시되고, 마커가 해당 위치에 표시됩니다.
이제 자바스크립트를 이용하여 Mapbox 지도에 마커를 표시하는 방법을 알아보았습니다. Mapbox API를 활용하여 다양한 기능을 추가할 수 있으니 참고하여 활용해 보세요.