드릴다운, 드릴업 구현하기 (mapSkill)

맵 차트 내부의 지역을 클릭하면 클릭한 지역의 하위 맵 차트를 불러오거나(drilldown) 상위 맵 차트로 돌아갈 수 있습니다(drillup).

Example

map.ondrilldown 이벤트에서 구현하는 방법

ibmap.update({
    map: {          
        // 지역을 클릭했을 때 드릴다운 처리를 위해 발생하는 이벤트
        ondrilldown: function(ev) {
            // 드릴다운 인덱스가 0 이면 드릴다운 처리
            // 드릴다운 인덱스는 드릴다운이 얼마나 발생했는 지를 뜻합니다.
            if (ev.index === 0) {
                ev.drilldown({
                    // 클릭지역id.json 맵 차트 불러오기
                    url: "./map/kr/" + ev.id + ".json"
                });
            }
            // 드릴다운 인덱스가 0이 아니면(이미 드릴다운이 이루어졌으면)
            else {
                // 상위 차트로 드릴업
                ibmap.map.drillup();
            }
        }
    }
})

드릴버튼으로 드릴업 구현하기

ibmap.update({
    map: {
        // 드릴업 기능을 하는 버튼 설정
        drillButton : {
            // 버튼 출력 텍스트
            text: "뒤로가기",
            // 버튼 스타일
            style: {
                backgroundColor: "#ADADAD",
                color: "#444444",
                borderWidth: 2,
                borderColor: "#DADADA"
            },
            // 버튼 좌우 위치
            align: "right",
            // 버튼 상하 위치
            verticalAlign:"bottom",
            // 버튼 좌우 포지션 이동값
            x: 5,
            // 버튼 상하 포지션 이동값
            y: 10
        },

        // 지역을 클릭했을 때 드릴다운 처리를 위해 발생하는 이벤트
        ondrilldown: function(ev) {
            // 드릴다운 인덱스가 0 이면 드릴다운 처리
            // 드릴다운 인덱스는 드릴다운이 얼마나 발생했는 지를 뜻합니다.
            if (ev.index === 0) {
                ev.drilldown({
                    // 클릭지역id.json 맵 차트 불러오기
                    url: "./map/kr/" + ev.id + ".json"
                });
            }
        }
    }
})