Mapbox는 인터랙티브한 지도와 위치 기반 애플리케이션을 개발하기 위한 우수한 도구입니다. 이 글에서는 자바스크립트를 사용하여 Mapbox지도에 정보 창을 추가하는 방법에 대해 알아보겠습니다.

Mapbox API 키 생성

먼저, Mapbox에서 제공하는 API 키를 생성해야 합니다. 이 키는 인증없이 Mapbox 서비스를 사용할 수 있도록 해줍니다. Mapbox 계정을 생성하고 API 키를 발급받으세요.

HTML 마크업

HTML 파일에 지도를 표시할 컨테이너 요소를 추가합니다. 이 요소는 Mapbox 지도를 렌더링할 공간을 제공합니다.

<div id="map"></div>

CSS 스타일링

Mapbox 지도의 컨테이너 요소에 CSS 스타일을 적용하여 원하는 모양으로 표시할 수 있습니다. 아래는 예시입니다.

#map {
  width: 100%;
  height: 400px;
}

자바스크립트 코드

이제 자바스크립트 코드를 작성하여 Mapbox 지도에 정보 창을 추가해보겠습니다.

// Mapbox API 키
const API_KEY = "YOUR_MAPBOX_API_KEY";

// Mapbox 지도 객체 생성
mapboxgl.accessToken = API_KEY;
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v11",
  center: [longitude, latitude], // 중심 좌표 설정
  zoom: 12 // 확대/축소 레벨 설정
});

// 정보 창을 추가할 마커 생성
const marker = new mapboxgl.Marker()
  .setLngLat([markerLongitude, markerLatitude]) // 마커 좌표 설정
  .addTo(map);

// 정보 창 생성
const popup = new mapboxgl.Popup({ closeOnClick: false })
  .setLngLat([markerLongitude, markerLatitude]) // 정보 창 표시 위치 설정
  .setHTML("<h3>마커 정보</h3><p>이곳에 원하는 내용을 적어주세요.</p>")
  .addTo(map);

// 마커 클릭 시 정보 창 표시
marker.getElement().addEventListener("click", function() {
  popup.addTo(map);
});

위의 코드에서 YOUR_MAPBOX_API_KEY 부분을 자신의 Mapbox API 키로 대체해야 합니다. 또한 longitude와 latitude에는 중심 좌표를, markerLongitude와 markerLatitude에는 마커 좌표를 입력해야 합니다.

결과 확인

위의 코드를 올바르게 작성하고 HTML 파일을 실행하면 Mapbox 지도가 표시되고 마커를 클릭하면 정보 창이 표시됩니다.

Mapbox를 사용하여 자바스크립트로 정보 창을 추가하는 방법에 대해 알아보았습니다. 본 문서는 참고용으로만 사용하시고 Mapbox 공식 문서를 참조하시면 더 자세한 정보를 얻을 수 있습니다.