UnitedStateMap¶
목적¶
USA의 지도 이미지를 활용하여 지역 선택 및 이벤트 트리거를 설정하는 UI 구성
주요 단계¶
1. UnitedStateMap UI 생성¶
o 원하는 위치에 UnitedStateMap UI를 생성하는 방법 설명
<사진 1> UnitedStateMap UI 생성 팝업 화면
2. UnitedStateMap UI 속성¶
<사진 2> UnitedStateMap 배치 및 속성(Attributes) 설정 화면
2.1. 주요 속성¶
| Name | Description |
|---|---|
| height | UnitedStateMap UI의 세로 높이 설정 |
| mapColor | 기본 배경색 설정 |
| rollOverOutlineColor | 마우스를 올려둔 지역의 테두리 색상 |
| selectedColor | 클릭한 지역의 색상 |
| showSmallMap | 우측 상단에 축소 지도 표시 여부 |
| visible | UnitedStateMap UI 표시 여부 |
| width | UnitedStateMap UI의 가로 크기 |
| styleClass | 적용할 CSS 스타일 |
3. UnitedStateMap 실행 화면¶
o Web 화면에서 UnitedStateMap이 정상적으로 표시됨을 확인 가능
<사진 3> UnitedStateMap 실행 화면
4. UnitedStateMap Properties - rollOverOutlineColor¶
o 마우스를 올려둔 지역의 테두리 색상 설정
<사진 4> Properties - rollOverOutlineColor 적용시 결과 화면
5. UnitedStateMap Properties - selectedColor¶
o 클릭한 지역의 색상 설정
<사진 5> Properties - selectedColor 적용시 결과 화면
6. UnitedStateMap Properties - showSmallMap¶
<사진 6> Properties - showSmallMap 적용시 결과 화면
6.1. 우측 상단에 축소된 지도(SmallMap) 표시 여부 설정¶
o true 설정 시 축소 지도 활성화
o 클릭하면 해당 지역으로 지도 이동
7. UnitedStateMap Aggregation - MapLocation¶
o UnitedStateMap 내 특정 지역을 지정할 수 있는 MapLocation 속성
<사진 7> Properties - MapLocation 적용시 결과 화면
7.1. 주요 속성¶
| Name | Description |
|---|---|
| balloonText | 마우스를 올렸을 때 표시되는 텍스트 |
| locationColor | 해당 지역의 색상 지정 |
| locationName | 특정 지역(주) 이름 |
| locationValue | 지역에 부여할 값 |
7.2. UnitedStateMap 실행 시 MapLocation Properties¶
<사진 8> MapLocation으로 설정한 특정 지역이 적용된 화면
8. UnitedStateMap Events - goHome¶
8.1. 좌측 상단 Home 버튼 클릭 시 goHome 이벤트 발생¶
o 기본적으로 Reset 기능 수행
o 추가적인 기능을 원할 경우 Method 설정 가능
<사진 9> Home 버튼 클릭시 화면 초기화 화면
9. UnitedStateMap Events - mapClick¶
특정 지역(주) 클릭 시 mapClick 이벤트 발생
<사진 10> mapClick 클릭시 이벤트 발생 화면