많은 웹 애플리케이션에서는 지도에서 특정 위치에 팝업을 추가해야 하는 경우가 있습니다. 예를 들어, 식당이나 상점의 위치를 마커와 함께 표시하고, 마커를 클릭하면 해당 장소에 대한 추가 정보가 나타나는 팝업을 표시할 수 있습니다.

1. 팝업 생성하기

지도에 팝업을 추가하기 전에, 우선 팝업을 생성해야 합니다. Popup 클래스를 사용하여 팝업을 생성하고, 내용과 옵션을 설정할 수 있습니다. 다음은 예시 코드입니다.

var popup = new mapboxgl.Popup()
    .setHTML("<h3>마커 팝업</h3><p>여기에 추가 정보를 입력하세요.</p>");

위의 코드에서 setHTML 메소드를 사용하여 팝업 내용을 HTML 형식으로 지정할 수 있습니다. 팝업 내에는 텍스트, 이미지, 링크 등 다양한 컨텐츠를 추가할 수 있습니다.

2. 팝업을 마커에 연결하기

팝업을 만들었다면, 이제 마커와 팝업을 연결해야 합니다. 마커를 생성하고, 마커를 클릭했을 때 팝업을 표시할 수 있도록 인터랙션을 설정해야 합니다. 다음은 예시 코드입니다.

var marker = new mapboxgl.Marker()
    .setLngLat([lng, lat])
    .addTo(map)
    .setPopup(popup);

위의 코드에서 setLngLat 메소드를 사용하여 마커의 위치를 설정할 수 있습니다. addTo 메소드를 사용하여 마커를 지도에 추가하고, setPopup 메소드를 사용하여 팝업을 마커에 연결할 수 있습니다.

3. 팝업 표시하기

팝업을 마커에 연결했다면, 마커를 클릭하면 팝업이 표시될 수 있도록 설정해야 합니다. 다음은 예시 코드입니다.

marker.on('click', function() {
    popup.addTo(map);
});

위의 코드에서 on 메소드를 사용하여 마커를 클릭했을 때 실행될 함수를 지정할 수 있습니다. 위의 예시 코드에서는 마커를 클릭했을 때 팝업을 지도에 추가하는 코드가 실행됩니다.

결론

위의 예시 코드를 참고하여, JavaScript와 Mapbox GL JS를 사용하여 지도에 특정 위치에 팝업을 추가하는 방법을 알아보았습니다. 이를 응용하여 웹 애플리케이션에서 지도를 활용하고 추가 정보를 표시할 수 있습니다.

이외에도 팝업의 스타일링, 다양한 이벤트 처리 등 많은 기능을 자유롭게 사용할 수 있으니, 공식 문서를 참고하여 원하는 기능을 구현해보시기 바랍니다.

참고 자료

• Mapbox GL JS 공식 문서