Leaflet 강좌 ㅡ 4. 지도 이벤트 살펴보기

이 글은 강좌 2에 이어 지도의 이벤트를 사용하는 내용에 대한 정리로써, 클릭(click) 이벤트를 예로 소개합니다.이 강좌의 진행을 위해 강좌 2에서 작성한 코드가 꼭 필요하니 바로 가져오기 바랍니다.

아래의 코드를 onLoad 함수의 마지막에 추가합니다.

var popup = L.popup();

function onMapClick(e) {
    popup.setLatLng(e.latlng)
        .setContent("당신은 지도를 클릭했고만, 바로 " + e.latlng.toString())
        .openOn(map);
    }

    map.on('click', onMapClick);

먼저 9번 코드가 지도에 대한 클릭 이벤트를 설정하고 있습니다. 첫번째 인자값인 click가 바로 클릭 이벤트 지정입니다. 그리고 두번재 인자에 클릭시 호출할 함수를 지정합니다. 이 함수는 3번~7번 코드에서 살펴볼 수 있습니다. 강좌3에서 설명한 Popup 객체를 사용하고 있습니다. 1번 코드에서 사용자가 클릭하면 표시될 팝업 객체를 미리 생성해 놓고 있습니다.

실행 결과는 아래와 같습니다. 아래의 지도 화면을 클릭해 보시기 바랍니다.

이상으로 기본적인 leaflet에 대한 API를 학습하면서, 총 4개의 글을 정리해 보았습니다. leaflet은 일반 사용자가 가지고 있는 위치 기반 데이터를 쉽게 매쉬업하고, 지도를 기반으로 다양한 기능을 구현할 수 있는 좋은 웹 GIS 엔진이라고 생각됩니다.

답글 남기기 응답 취소