[javascript] 자바스크립트를 활용하여 Mapbox지도에 다각형 표시하기

22 Nov 2023

javascript

Mapbox는 인터랙티브한 지도를 구현할 수 있는 강력한 도구입니다. 이번 포스트에서는 자바스크립트를 활용하여 Mapbox 지도에 다각형을 표시하는 방법에 대해 알아보겠습니다.

Mapbox API 키 발급하기

먼저, Mapbox API 키를 발급받아야 합니다. Mapbox 홈페이지에 가입하고, 개발자 대시보드에서 키를 생성해야 합니다. 생성된 키를 이용해 자바스크립트 코드에서 Mapbox API에 접근할 수 있게 됩니다.

HTML 파일 작성하기

다음으로, Mapbox를 활용하기 위해 HTML 파일을 작성해야 합니다. 아래는 기본적인 HTML 구조입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.1.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 src="script.js"></script>
</body>
</html>

위의 예제에서는 Mapbox의 JavaScript 라이브러리와 CSS 파일을 로드하고, 지도를 표시할 <div> 요소를 추가하였습니다. 또한, 자바스크립트 코드를 포함하는 script.js 파일을 추가하였습니다.

자바스크립트 코드 작성하기

이제 script.js 파일에 자바스크립트 코드를 작성하여 Mapbox 지도에 다각형을 표시해보겠습니다.

// Mapbox API 키를 설정합니다.
mapboxgl.accessToken = 'YOUR_MAPBOX_API_KEY';

// Mapbox 지도를 생성합니다.
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [longitude, latitude],  // 지도의 중심 좌표를 설정합니다.
    zoom: 10  // 지도의 확대/축소 레벨을 설정합니다.
});

// 다각형을 생성하고 지도에 추가합니다.
var polygon = new mapboxgl.Marker({
  color: "#FF0000"  // 다각형의 색상을 설정합니다.
})
.setLngLat([[longitude1, latitude1], [longitude2, latitude2], [longitude3, latitude3]])
.addTo(map);

위의 코드에서 YOUR_MAPBOX_API_KEY 부분에는 앞서 발급받은 Mapbox API 키를 입력해야 합니다. 또한, longitude, latitude 변수를 통해 지도의 중심 좌표를 설정하고, longitude1, latitude1, longitude2, latitude2, longitude3, latitude3 변수를 통해 다각형의 좌표를 설정합니다. 이 예제에서는 삼각형을 표시하도록 하였습니다.

다각형의 좌표는 위도와 경도 값을 순서대로 입력하며, 각 점 사이는 ,로 구분합니다. setLngLat() 메소드를 사용하여 다각형의 좌표를 설정하고, addTo() 메소드를 사용하여 다각형을 지도에 추가합니다.

결과 확인하기

이제 HTML 파일을 웹 브라우저에서 실행하여 결과를 확인해보세요. 지정한 중심 좌표와 다각형이 Mapbox 지도에 표시될 것입니다.

이와 같이 자바스크립트를 활용하여 Mapbox 지도에 다각형을 표시할 수 있습니다. 이를 응용하여 원하는 다양한 형태의 다각형을 Mapbox 지도에 표시해보세요.

참고 문서

Mapbox API 문서