WorldMap¶
목적¶
세계 지도 이미지를 활용하여 이벤트를 적용하고 UI를 구성하는 방법을 설명
주요 단계¶
1. WorldMap UI 생성¶
o 원하는 위치에 WorldMap UI를 생성하는 방법 설명
<사진 1> WorldMap UI 설정 화면
1.1. WorldMap UI 속성¶
| 속성명 | 설명 |
|---|---|
| backgroundColor | WorldMap UI의 배경색 |
| busy | 로딩 상태 전환 여부 |
| busyindicatorDelay | 지정한 시간(ms) 이후 로딩 표시 |
| busyindicatorSize | 로딩 인디케이터 크기 |
| height | WorldMap 세로 높이 |
| selectedColor | 지역 선택 시 표시되는 색상 |
| showSmallMap | 우측 상단에 축소된 지도 표시 |
| visible | WorldMap 표시 여부 |
| width | WorldMap 가로 너비 |
| styleClass | 적용할 CSS 스타일 |
2. WorldMap 실행 화면¶
<사진 2> WorldMap UI 실행 후 표시되는 화면
3. WorldMap Busy 상태¶
o busyindicatorDelay 값 설정 후 일정 시간 경과 시 로딩 인디케이터 생성
<사진 3> WorldMap Busy 상태 화면
4. WorldMap Properties - selectedColor¶
o 마우스로 선택한 지역에 색상이 적용됨
o 선택된 지역의 색상을 설정 가능
<사진 4> WorldMap 색상 적용된 화면
5. WorldMap Properties - showSmallMap¶
o 우측 상단에 축소된 지도가 생성됨
o 축소 지도에서 지역 클릭 시 메인 맵이 해당 지역으로 이동
<사진 5> WorldMap Small Map 표시 화면
6. WorldMap Events - mapClick¶
o WorldMap을 클릭했을 때 이벤트 발생
<사진 6> WorldMap 클릭시 메세지 출력 화면
o WorldMap 확대 또는 축소 시 이벤트 발생
<사진 7> WorldMap 확대시 메세지 출력 화면