Leaflet 강좌 ㅡ 3. 지도에 팝업(Popup) 표시하기

이 글은 강좌 2에 이어 지도에 팝업을 표시하는 내용에 대한 정리입니다. 이 강좌의 진행을 위해 강좌 2에서 작성한 코드가 꼭 필요하니 바로 가져오기 바랍니다.

지도 상에 파업을 표시하는 경우는 크게 2가지로써, 첫번째 사용자가 지도에 추가한 그래픽 요소를 클릭했을때 표시되는 팝업, 두번째로 사용자가 지정한 좌표 위에 파업을 표시하는 것입니다. 먼저 사용자가 지도에 추가된 그래픽 요소를 클릭했을 때 표시되는 파업에 대한 API를 살펴 보겠습니다.

이미 강좌2에서 마커, 원, 폴리곤에 대한 3개의 그래픽 요소를 추가했습니다. 아래의 코드를 onLoad 함수의 가장 마지막 부분에 추가합니다.

marker.bindPopup("Hello world!
I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

marker와 circle 그리고 polygon 변수는 강좌 2에서 작성한 그래픽 요소를 참조하고 있는 변수입니다. 이 변수에 bindPopup 함수를 호출함으로써 각 그래픽 요소를 클릭할때 표시할 팝업을 지정할 수 있습니다. 표시할 팝업은 HTML 태그로 작성할 수 있으므로 매우 유연하고 자유롭게 내용을 구성할 수 있습니다. 1번 코드를 보면 marker에 대해서는 openPopup 함수를 호출하고 있습니다. 이는 사용자가 해당 요소를 클릭하지 않아도 기본적으로 팝업이 표시되도록 하는 함수입니다. 실행 결과는 아래와 같습니다.

이제 다음로 개발자가 지정한 임의의 좌표에 팝업을 표시하는 코드에 대해 살펴 보겠습니다. onLoad 함수 가장 마지막에 아래와 같은 코드 한줄을 추가합니다.

var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

위의 코드를 보면 Popup 객체를 생성하고 표시될 좌표와 내용을 지정하고 openOn 함수를 호출함으로써 바로 지도에 팝업을 표시하도록 합니다. 실행 결과는 아래와 같습니다.

답글 남기기 응답 취소