rMateMapChart 사용설명서 - PDF Free Download

rmate MapChart for HTML5 사용설명서 Version 4.0 정품을구입하신고객에게는기술상담및지원을제공합니다 (Tel : 02-2655-9767, riamore@riamore.net 서울시영등포구영신로 220 KnK 디지털타워 611 호 ) 리아모어소프트

목차 1. 개요... 5 1.1. rmate MapChart for HTML5 의주요특징... 5 1.2. 제품구성정보... 5 1.3. 시스템요구사항... 5 1.4. 맵차트시스템구성환경설명... 5 2. 기본적인 rmate MapChart 생성... 6 2.1. rmate MapChart 라이선스등록하기... 6 2.2. 제공된샘플을토대로맵차트생성하기... 7 3. 맵차트데이터... 10 3.1. 맵소스... 10 3.2. 맵데이타베이스... 11 3.3. 맵데이타... 11 4. 맵차트레이아웃... 11 4.1. rmate MapChart 에서레이아웃의역할... 11 4.2. 레이아웃작성방법에대하여... 12 4.3. 레이아웃의 rmatemapchart 노드설정하기... 13 4.4. 레이아웃의 Style 노드 (CSS 적용 ) 설정하기... 14 5. 맵차트설정및연동방식... 16 5.1. mapvars 설정... 16 5.2. 맵차트에접근가능한함수들... 17 6. 시리즈... 18 6.1. 맵시리즈 (MapSeries)... 18 6.2. 버블시리즈 (MapBubbleSeries)... 19 6.3. 이미지시리즈 (MapImageSeries)... 20 6.4. 판넬시리즈 (MapPanelSeries)... 22 6.5. 플롯시리즈 (MapPlotSeries)... 24 6.6. 루트시리즈 (MapRouteSeries)... 25 6.7. 스파크시리즈 (MapSparkSeries)... 27 6.8. Div 시리즈 (MapDivSeries)... 28 7. 색상... 30 7.1. 일반적인컬러 ( 단색 ) 지정하기... 30 7.2. Linear 그라데이션컬러지정하기.... 30 7.3. Stroke 지정하기... 31 7.4. 그림자지정하기... 31 2/104

8. 클릭시불려지는함수설정하기... 32 8.1. 지역클릭시불려지는함수설정하기... 32 8.2. 시리즈아이템클릭시불려지는함수설정하기... 36 8.3. 하위맵상태에서상위맵버튼, 지도외부클릭시불려지는함수설정하기... 42 9. 사용자정의함수설정하기... 46 9.1. 데이터팁 ( 툴팁 ) 함수사용자정의.... 47 9.2. 라벨사용자정의... 49 9.3. 타이틀사용자정의... 51 9.4. 지역색사용자정의... 53 9.5. 아이템채우기색사용자정의... 55 9.6. 지역외곽선색사용자정의... 57 10. 범례 (Legend) 넣기... 59 11. 데이터영역범례 (DataRangeLegend) 넣기.... 63 12. 고급사용자를위한기능... 64 12.1. 맵차트생성시효과적용하기.... 64 12.2. 맵네비게이터표시하기... 65 12.3. GIS 좌표로표시하기... 66 13. 맵소스의편집및제작... 67 13.1. SVG... 67 14. 컴포넌트별속성, 스타일, 함수및이벤트... 68 14.1. MapChart... 68 14.2. MapSeries... 73 14.3. MapBubbleSeries... 78 14.4. MapImageSeries... 82 14.5. MapPlotSeries... 85 14.6. MapPanelSeries... 89 14.7. MapRouteSeries... 93 14.8. MapSparkSeries... 96 14.9. MapDivSeries... 97 14.10. Legend... 98 14.11. LegendItem... 98 14.12. SubLegend... 99 14.13. DataRangeLegend... 99 14.14. SolidColor... 100 14.15. LinearGradient... 100 14.16. RadialGradient... 101 14.17. GradientEntry... 101 14.18. MapNavigator... 101 3/104

15. rmate MapChart for HTML5 의기타유의사항설명... 101 15.1. HMTL5 맵차트에서지원하지않는기능... 102 15.2. HTML5 맵차트의리사이즈... 102 15.3. 기타 HTML5 맵차트의데스크탑 / 모바일브라우저및기기에따른유의사항... 103 SVG 파일의저작권... 104 4/104

1. 개요 1.1. rmate MapChart for HTML5 의주요특징. rmate MapChart for HTML5 는 ActiveX 기술을배제한순수자바스크립트와 SVG 를바탕으로개발된어플리케이션으로사용자에게지도를이용해데이터를시각적으로알기쉽게제시할수있는솔루션을제공합니다. HTML,.NET, JSP, PHP, ASP, ColdFusion 등과같은웹스크립트언어에구애받지않고, 맵차트를생성할수있습니다. http://www.riamore.net 의데모메뉴에서강력하고쉬운맵차트를직접체험하실수있습니다. 1.2. 제품구성정보 라이선스증서 (1 부 ), 제품 CD ( 요청시제공 ) 1.3. 시스템요구사항 서버사이드 : 순수자바스크립트와 HTML5 기술을바탕으로두기때문에톰캣, IIS, 웹로직, 웹스피어, 제우스, LCDS 등등모든 WAS 서버에서작동하며, 서버스크립트언어에의존적이지 않습니다. 클라이언트사이드 : SVG 를정상적으로지원하는브라우저가필요합니다. IE 파이어폭스 사파리 크롬 아이폰 아이패드 안드로이드 9.0+ 3.0+ 3.0+ 4.0+ 3.2+ IOS7이상 3.0+ 1.4. 맵차트시스템구성환경설명 데이터및레이아웃 작성 인터넷을통한데이터 및레이아웃전송 (http) 서버 클라이언트 < 그림 1 서버와클라이언트간의구성도 > 5/104

rmate MapChart 를생성하기위해서는맵차트레이아웃과맵차트에표현하고자하는데이터, 맵의이미지정보가들어있는맵데이타베이스, 맵에쓰일이미지소스가필요합니다. 맵차트레이아웃은맵차트를어떻게표현할지를나타내는서식을결정하게됩니다. 예를들면맵차트의서브맵표시여부, 지역의색상및자바스크립트연동등등세밀한부분을제어하는 XML 파일입니다. rmate 맵차트데이터연동은다음 5 가지형태를지원합니다. URL 을호출하여 XML 데이터를받아처리하는형태 URL 을호출하여배열데이터를받아처리하는형태 XML 문자열을자바스크립트를통해전달하는형태 배열데이터를자바스크립트를통해전달하는형태 자바스크립트에서배열을선언하고값을넣어 array 객체를전달하는형태. 2. 기본적인 rmate MapChart 생성 2.1. rmate MapChart 라이선스등록하기 정상적인맵차트를생성하기위해서는 rmate MapChart 라이선스를등록하셔야합니다. 제공된시디의다 음경로에있는파일이맵차트에삽입할라이선스입니다. /LicenseKey/rMateMapChartH5License.js 위자바스크립트파일을 <head> 태그안에삽입하시면됩니다. 다른작업을하실필요는없습니다. <html> <head> <! rmate MapChart 라이선스등록완료모습 --> <script src="rmatemapcharth5license.js" language="javascript"></script>  <script language="javascript" type="text/javascript"> 6/104

< 예제 1 rmate MapChart 라이선스등록예제 > 2.2. 제공된샘플을토대로맵차트생성하기 맵차트를생성하기위해서는제공된 CD 의다음경로를따라각각의파일을복사하여작업디렉토리에 복사하십시오. 데이터파일 Samples/Data/data.txt 레이아웃파일 : Samples/LayoutXml/LayoutBasic.xml 맵데이타베이스파일 : Samples/MapDataBaseXml/KoreaSiDo.xml 맵소스 Svg 파일 : MapSource/KoreaSiDo.svg 맵차트 JS 라이브러리 : rmatemapcharth5/js/rmatemapcharth5.js 라이선스파일 : /LicenseKey/rMateMapChartH5License.js 위파일을다음과같이 html 파일에설정합니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd" [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/>  <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/>  <script language="javascript" type="text/javascript" src="./licensekey/rmatemapcharth5license.js"></script>  <script language="javascript" type="text/javascript" src="..rmatemapcharth5/js/rmatemapcharth5.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // rmatemapchart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) 7/104

// 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7 개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML 을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML 을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayouturlex(layouturl); // document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); } // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapSeriesProperties.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. //var dataurl = "./Data/branchdata.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // MapSource 디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg 이미지를지정할수있습니다.( 매뉴얼참조 ) = "./MapSource/KoreaSiDo.svg";  </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - Map Sereis 속성 </p> </div> <div class="desc"> <br> <p></p> </div> 8/104

<div class="content">  <div id="mapholder" style="width:600px; height:400px;"> </div> </div> </div> </body> </html> < 예제 2 HTML 페이지에맵차트삽입하기 > 위처럼정의한후저장후실행시키면다음과같은화면을볼수있습니다. < 그림 2 HTML 페이지에맵차트삽입성공화면 > 사용자가웹페이지를작성할때지켜야할사항은다음과같습니다. 1. HTML 의 doctype 을지정하십시오. ( 다른 doctype 이어도무방합니다 ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> 2. rmatemapcharth5license.js 와 rmatemapcharth5.js 를포함시켜주십시오. <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script> <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script> 9/104

3. 필요에따라맵차트에서사용할이미지의 CSS 를포함시켜주십시오. <link rel="stylesheet" type="text/css" href="../rmatemapcharth5/assets/rmatemapcharth5.css"/> 4. 맵차트가생성될 Div 태그를지정하여영역을확보해주십시오. <div id="mapholder" style="width:600px; height:400px;"></div> 5. 맵차트의레이아웃과데이터와맵데이터베이스를작성하여주십시오. 6. rmatemapcharth5.create() 함수호출로맵차트를생성합니다. // rmatemapchart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); 만일 html 문서인코딩을 utf-8이아닌다른문자셋을사용할경우에는다음과같이자바스크립트를포함시키는문장에 charset을 utf-8로설정해주시기바랍니다. ( 자바스크립트는 utf-8로인코딩되어있음 ) <script type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js" charset="utf-8"></script> 3. 맵차트데이터. rmate MapChart 에필요한데이터는맵소스, 맵데이타베이스, 맵데이타입니다. 맵데이타는 XML 형식과, 자바스크립트배열형식을지원합니다. 사용자는몇가지규칙에따라맵차트데이터를작성할필요가 있습니다 3.1. 맵소스 맵차트에서사용할지역이미지를포함하는객체입니다. 현재준비되어있는이미지는시군경계를포함하는전국지도, 시도경계를포함한는전국지도, 남북한지도와대륙을표시하는세계전도등입니다. 그리고이이미지들은 MapSource 디렉토리에저장되어있습니다. 사용시에는 sourceurl 에해당 Svg 의 path 를주면지도이미지가읽혀지도록되어있습니다. 별도의지도를제작하거나기존 Svg 를편집하고자할경우 맵소스의편집및제작 을참고하시기바랍니다. 10/104

3.2. 맵데이타베이스 맵소스와매칭되는지도의내용을표현하는 XML 데이터입니다. 맵데이타베이스에는지역코드, 라벨 ( 지역명 ), 심볼명 ( 맵소스의심볼 ), 각지역의중심을조정하기위한 horizontalcentergap, verticalcentergap 과 drilldown 시하위맵의크기를지정하는 scale 과사용자선택가능여부를나타내는 enabled 과인터랙티브비활성화를지정하는 event( 값 :none) 가있습니다. scale 의값의경우 1 을 100% 로표현하며 90% 는 0.9, 110% 는 1.1 형태로입력하면됩니다. 맵차트의보여지는라벨이나코드, 이미지등은모두이맵데이타베이스에서읽어들인정보입니다. 현재맵차트에서지원되는전국지도와세계지도에대해맵데이타베이스가만들어져있으며샘플의 MapDataBaseXml 디렉토리에저장되어있고 Svg 파일명과동일한파일명에확장자만 xml 로바뀌어있습니다. 심볼명을제외한모든부분은개발시필요에따라변경하셔도무방합니다. ( 별도의 Svg 를제작하신다면 Svg 에서의그럼조각의이름과심볼명을맞추어작성하시면됩니다 ) 특히지역코드는특별한코드체계없이가다다순으로정의한코드로사용자가쓰시는코드체계로지역코드를바꿔쓰시면됩니다. 다만변경시주의사항은바꾼지역코드와맵데이타의지역코드는반드시매칭이되어야한다는점입니다. 매칭이안되는데이터는버려지며맵차트에서보이지않게됩니다. 3.3. 맵데이타 맵데이타는사용자데이터를의미하며없을경우에는안넣으셔도됩니다. 샘플에서지역색바꾸기나, 클릭연동시지역마다데이터를연동하고싶을때사용하시면되며 XML 또는 JSON 형식으로작성하여입력하시면됩니다. 이때주의할점은맵데이타에는반드시지역코드가 MapChart 의 areacodefield 속성에서정의한 ( 기본은 code 임 ) 이름으로들어가야하며, 이코드는맵데이타베이스에서정의된 ( 또는사용자가재정의한 ) 코드를사용해야한다는점입니다. 데이타가 JSON 형일경우 chartvas 에아래와같은구문을추가하셔야합니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; 4. 맵차트레이아웃. 4.1. rmate MapChart 에서레이아웃의역할 rmate MapChart 는미리작성된레이아웃의 XML 을파싱하여동적으로생성됩니다. 사용자가작성한 레이아웃을 rmate MapChart 의 swf 파일에입력하면맵차트는미리내장하고있는 rmate MapChart Component 클래스를기반으로레이아웃에작성된맵차트를생성하고데이터를출력하게됩니다. 11/104

다음은이런과정을다이어그램으로표현한것입니다. 레이아웃 rmate MapChart Root 데이터 맵데이터베이스 rmate MapChart JavaScript Library 맵소스 < 그림 3 rmate MapChart 동작다이어그램 > 4.2. 레이아웃작성방법에대하여 rmate MapChart 의모든레이아웃은 <rmatemapchart> 태그로시작하여 </rmatemapchart> 태그로끝납니다. 레이아웃은크게맵차트 UI 요소와맵차트, Style 세부분으로구분됩니다. 맵차트 UI 요소는옵션적으로필요시정의되는요소이며, Style 또한맵차트의스타일제어를위해필요시정의하면됩니다. 레이아웃을작성하는방법은기본적으로 XML 형식을따르시면됩니다. rmate MapChart 는 ID 에의한객체접근을지원합니다. 예를들어 LegendItem 객체의속성으로 fill 이 존재합니다. 이 fill 속성의속성값으로맵차트 UI 요소에서정의한 SolidColor 인스턴스를할당합니다. 이를표현한일반적인방법은아래와같습니다. <rmatemapchart> <MapChart />... <Legend direction="horizontal" borderstyle="solid" bordercolor="#999999" backgroundcolor="#ffffff"> <LegendItem label="30 이하 "> <fill> <SolidColor color="#ff0000"/> </fill> </LegendItem> </Legend> </rmatemapchart> < 예제 3 일반적인속성값할당법 > 12/104

그러나사용자의편의를위해 < 예제 4 ID 에의한속성값할당법 > 과같이 SolidColor 인스턴스를미리생성한후그 ID 를통해 SolidColor 인스턴스를활용할수있습니다. 이는여러객체들이하나의 SolidColor 인스턴스에접근하고자할때불필요하게 SolidColor 인스턴스를생성하지않고미리만들어진하나의 SolidColor 에접근하기때문에효율적입니다. 또한어느특정객체를반드시참조해야하는경우에도효율적입니다. <rmatemapchart> <SolidColor id="color" color="#ff0000"/> <MapChart />... <Legend direction="horizontal" borderstyle="solid" bordercolor="#999999" backgroundcolor="#ffffff"> // 객체 ID 인경우엔시작과끝을중괄호 ({,}) 로묶음 <LegendItem label="30 이하 " fill="{color}"> </Legend> </rmatemapchart> < 예제 4 ID 에의한속성값할당법 > 앞으로레이아웃을작성할때 MapChart 와 Series 가자주나오게될것입니다. 이에대한개념을 정리하면아래와같습니다. 맵차트 (MapChart) 시리즈 (Series) 설명 맵차트는 외형을 담당합니다. 배경, 사이즈 등등이포함됩니다. 가장중요한역할로시리즈를 포함하게되며사용자액션에반응하게됩니다. 실질적인데이터를표현합니다. 맵차트는반드시 1개의 MapSeries를가지고있어야하며, 그외에 필요에 따라 다른 시리즈를 추가 하실 수 있습니다. < 표 1 맵차트와시리즈설명표 > 비고 MapChart MapSeries, MapBubbleSeries, MapImageSeries, MapPanelSeries, MapPlotSeries 4.3. 레이아웃의 rmatemapchart 노드설정하기 rmatemapchart 노드는레이아웃의시작과끝을나타냅니다. 또한이노드의속성은맵차트전체의 꾸미기를담당합니다. 속성명 유효값 설명 scalemode auto, manual (auto) 지도의스케일모드. 13/104

"auto" 의경우화면의크기에따라지도의배율을조정하여표시하고, manual 의경우지정된배율로지도를표시합니다. backgroundcolor RGB( 기본값 : #FFFFFF) 바탕색을나타냅니다. backgroundalpha 0.0 ~ 1.0( 기본값 :1.0) 바탕투명도를나타냅니다. borderstyle none solid inset outset ( 기본값 :none) 테두리선을정의합니다. bordercolor RGB( 기본값 : #B7BABC) 테두리색을정의합니다. borderthickness Number ( 기본값 :1) 테두리두께를정의합니다. cornerradius Number( 기본값 :0) 모서리를둥글게처리하는정도를나타냅니다. horizontalalign left, right, center ( 기본값 :center) 수평정렬방식을나타냅니다. horizontalgap Number( 기본값 :8) 객체들의가로간격사이여백 verticalalign top, bottom, middle ( 기본값 :middle) 수직정렬방식을나타냅니다. verticalgap Number( 기본값 :6) 객체들의세로간격사이여백 < 표 2 rmatemapchart 노드속성과유효값설명 > 아래는 rmatemapchart 노드의속성사용예를나타낸것입니다. <rmatemapchart cornerradius="12" borderstyle="solid" backgroundcolor="#ffff77"> <MapChart>... </rmatemapchart> < 예제 5 rmatemapchart 노드의속성사용예 > rmatemapchart 에대한속성은맵차트의바탕을표현해야하는경우에만사용하면되며, 기본적으로 별도의속성을주실필요는없습니다. 4.4. 레이아웃의 Style 노드 (CSS 적용 ) 설정하기 <Style> 노드는전반적인스타일을미리정의하는스타일시트이며, html 에서사용하는 CSS 와동일한정 의를사용합니다. <Style/> 을선언하는방법에는몇가지규칙이있습니다. 첫째, <Style/> 노드는반드시 <rmatemapchart> 노드의자식위치에정의하십시오. 둘째, 스타일네임을정의할때시작은도트 (.) 을찍고소문자로시작하는영문자로표기하십시오. 셋째, 스타일네임을정한후그에따른구체적인스타일을정의할때는반드시중괄호 ({,}) 로시작과끝을표시하십시오. 넷째, 속성명과속성값 (value) 의구분은콜론 (:) 이며끝은세미콜론으로나타냅니다. 14/104

다음은올바른예와잘못된예를나타낸것입니다. <rmatemapchart> <MapChart>... 올바른예 <Style>.rMateMapChartStyle { backgroundcolor:#fffffe; bordercolor:#77ee9e; borderthickness:3; borderstyle:solid; } </Style> </rmatemapchart> < 표 3 Style 작성예 > 잘못작성된예 <rmatemapchart> <MapChart>... <Style> MapChartStyle [ backgroundcolor:#fffffe; bordercolor: #77EE9E ; borderthickness:3; borderstyle: solid ; ] </Style> </rmatemapchart> 위와같이 rmatemapchartstyle 스타일을정의였습니다. 그렇다면이스타일을적용하는방법에대해보 도록하겠습니다. <rmatemapchart stylename="rmatemapchartstyle"> <MapChart>... <Style>.rMateMapChartStyle { backgroundcolor:#fffffe; bordercolor:#77ee9e; cornerradius:12; borderthickness:3; borderstyle:solid; } </Style> </rmatemapchart> < 예제 6 Style 적용예 > < 예제 6 Style 적용예 > 를보시면 rmatemapchartstyle 은 <rmatemapchart/> 노드의스타일을정의한것이고적용법은 stylename= 정의한스타일이름 즉, stylename= rmatemapchartstyle 과같습니다. <Style/> 에서정의가능한각각의속성은이문서의 < 컴포넌트별속성, 스타일, 함수및이벤트 > 에서각컴포넌트의스타일부분을참조하시면됩니다. 15/104

스타일을활용한예제와출력모습은아래와같습니다. <rmatemapchart> <MapChart id="map1" stylename="mapstyle"> </MapChart> <Style>.mapStyle { color:#ff0000; fontweight:bold; textdecoration:underline; fontsize:12; } </Style> </rmatemapchart> < 예제 7 Style 적용한예제 > 5. 맵차트설정및연동방식 HTML5 로작성된 rmate MapChart 와웹브라우져와의연동을위하여 HTML5 속성인 mapvars 를사용합 니다. 이의사용법및기본변수에대해서설명하겠습니다. 5.1. mapvars 설정 mapvars 변수는 rmate MapChart 의데이터, 레이아웃등을설정할수있는가장기본적인변수입니다. 이변수는스크립트단에서맵차트를임베딩할때함께파라메터로함께삽입하게됩니다. mapvars 변수설정은다음과같은규칙을따릅니다. mapvars 변수는스트링입니다. 두개이상의설정을하기위해구분자 & 를사용합니다. 예를들어맵소스와맵데이터베이스와데이터 XML URL 과레이아웃 XML URL 을설정하는방법은아래와같습니다 var layouturl = "./Layout.xml"; var mapvars = "layouturl="+layouturl; var dataurl = "./singledata.xml ; mapvars += "&dataurl="+dataurl; var mapdatabaseurl = "./MapDataBaseXml/KoreaDrillDown.xml"; mapvars += "&mapdatabaseurl="+mapdatabaseurl; var sourceurl = "./MapSource/KoreaDrillDown.svg"; mapvars += "&sourceurl="+sourceurl; < 예제 8 mapvars 적용예제 > 16/104

mapvars 로설정가능한속성값은다음과같습니다. 속성명 유효값 설명 layouturl URL 주소 맵차트레이아웃 XML URL 경로 dataurl URL 주소 맵차트데이터 XML URL 경로 mapdatabaseurl URL 주소 맵차트데이터베이스 XML URL 경로 sourceurl URL 주소 맵차트소스 URL 경로 rmateonloadcallfunction 자바스크립트함수명 스크립트와맵차트동기화시맵차트가호출할함수설정 ( 최초 1번만호출됨 ) mapvars 를설정한후실제적으로맵차트를생성하는함수에설정한 mapvars 를파라메터로넣어줍니 다. rmatemapcharth5.create("map1", mapholder", mapvars, 500, 500, auto ); 이때 rmatemapchartcreate 함수의파라메터는다음과같습니다. ( 순서대로 ) 1. ID ( 임의로정의하십시오 ) 2. 맵차트가생성될 DIV 태그. 3. URL 경로등을정의한 mapvars변수. 4. rmatemapchart 가로사이즈 ( 픽셀이나, % 도가능 ). 5. rmatemapchart 세로사이즈. ( 픽셀이나 % 도가능 ) 5.2. 맵차트에접근가능한함수들 사용자의편의를위해 rmate MapChart 는다음과같은함수를열어놓았습니다. 1. setdataurlex(value) : 데이터 XML URL 경로를맵차트에삽입합니다. 2. setlayouturlex (value): 레이아웃 XML URL 경로를맵차트에삽입합니다. 3. setmapdatabaseurlex (value): 맵데이타베이스 XML URL 경로를맵차트에삽입합니다. 4. setsourceurlex (value): 맵소스 URL 경로를맵차트에삽입합니다. 5. setdata (value): 배열형태또는 XML 스트링형태의데이터를맵차트에삽입합니다. 6. setlayout (value): 스트링형태의레이아웃을맵차트에삽입합니다. 7. setmapdatabase (value): XML 스트링형태의맵데이터베이스를맵차트에삽입합니다. 8. setrootcode(value): 맵차트의 rootcode 를지정합니다. 9. setopencode(value): 맵차트의 opencode 를지정합니다. 10. setselectedcode(value): 맵차트의 selectedcode 를지정합니다. 11. resize(): 맵차트전체의크기를변경하고싶을경우호출합니다. 17/104

6. 시리즈 rmate MapChart 는 1 개의 MapChart 에여러개의시리즈를포함하여구성됩니다. 이때포함될수있는시리즈는아래나열된여러종류의시리즈가될수있으며맵시리즈를제외한나머지시리즈는중복되어포함될수있습니다. 6.1. 맵시리즈 (MapSeries) 맵시리즈는맵차트의지역을표시하는시리즈로맵소스와맵데이타베이스를이용하여해당지역의이미지를그리는시리즈이며, 맵차트에는반드시 1 개의맵시리즈가포함되어야하고, 여러개의맵시리즈가포함되면안됩니다. 또한포함시에도제일먼저나열되어야만올바르게표시되며뒷부분에놓이게되면다른시리즈를덮어쓰게되어다른시리즈가안보일수있습니다. 맵시리즈는 <MapSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 맵시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" showdatatips="true" datatipmode="single" scalemode="auto"> <series> <MapSeries id="mapseries" selectionmarking="line" color="#ffffff" labelposition="inside" displayname="map Series"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> 18/104

< 예제 9 맵시리즈레이아웃예제 > < 그림 4 맵시리즈출력모습 > 6.2. 버블시리즈 (MapBubbleSeries) 버블시리즈는특정지역의수치를원의크기로나타낼수있는시리즈로지역별차이를시각적으로표현할때쓸수있는시리즈입니다. 수치데이타를 radiusfield 속성으로데이터에서읽어표시할수있으며 maxradius, minradius 속성을통해최대, 최소수치일경우의원의반지름을지정할수있습니다. 표시되는원의중심좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 버블시리즈는 <MapBubbleSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 버블시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap > <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> 19/104

</showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapBubbleSeries id="bubble" radiusfield="sales" minradius="5" color="#888888" labelposition="inside" displayname=" 지점 "> <fill> <SolidColor color="#c8ec14"/> </fill> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#bbbbbb"/> </stroke> </MapBubbleSeries> </series> </MapChart> </rmatemapchart> < 예제 10 버블시리즈레이아웃예제 > < 그림 5 버블시리즈출력모습 > 6.3. 이미지시리즈 (MapImageSeries) 20/104

이미지시리즈는특정지역에이미지를올려놓을수있는시리즈로지역별사진을시각적으로표현할때쓸수있는시리즈입니다. 이미지의 url 을 imageurlfield 속성으로데이터에서읽어이미지를로드할수있으며 imagewidth, imageheight 속성을통해읽어들인이미지의크기를고정으로지정할수있습니다. 표시되는이미지의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 이미지시리즈는 <MapImageSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 사용할수있는이미지는 JPG, PNG, SVG 에한정됩니다. 이미지시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap" > <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <localfill> <SolidColor color="#eeeeee"/> </localfill> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapImageSeries id="image" labelfield="label" imageurlfield="imgurl" horizontalcentergapfield="h" verticalcentergapfield="v" imagewidth="40" imageheight="30" color="#ffffff" labelposition="bottom" displayname=" 관광 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#000000"/> </labelfilters> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapImageSeries> </series> </MapChart> 21/104

</rmatemapchart> < 예제 11 이미지시리즈레이아웃예제 > < 그림 6 이미지시리즈출력모습 > 6.4. 판넬시리즈 (MapPanelSeries) 판넬시리즈는특정지역에판넬형태로텍스트를올려놓을수있는시리즈로지역별수치나문자열을시각적으로표현할때쓸수있는시리즈입니다. 표시되는판넬은헤더와바디로구성되며기본적으로헤더에는지역명이사용되고 titilefield, titlejsfunction 을통해변경가능하며, 바디에들어갈문자열은 bodytextfield 속성으로데이터에서읽어표시할수있고, panelwidth, panelheight 속성을통해표시할판넬의크기를고정으로지정할수있습니다. 표시되는판넬의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 또한판넬의형태를 itemrenderer 를통해수직형판넬과수평형판넬중택일할수있습니다. 판넬시리즈는 <MapPanelSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 판넬시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false"> <series> <MapSeries id="mapseries" interactive="false"> 22/104

<filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <localfill> <SolidColor color="#eeeeee"/> </localfill> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPanelSeries id="panel" titlefield="label" bodytextfield="temperature" horizontalcentergapfield="h" verticalcentergapfield="v" color="#555555" horizontalalign="right" displayname=" 날씨 "> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapPanelSeries> </series> </MapChart> </rmatemapchart> < 예제 12 판넬시리즈레이아웃예제 > < 그림 7 판넬시리즈출력모습 > 23/104

6.5. 플롯시리즈 (MapPlotSeries) 플롯시리즈는특정지역에포인트를올려놓을수있는시리즈로지도에특정위치를시각적으로표현할때쓸수있는시리즈입니다. 표시되는포인트는원, 사각형, 삼각형, 볼형태가가능하며 radius 속성을통해포인트의반지름을지정할수있습니다. 표시되는포인트의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 플롯시리즈는 <MapPlotSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 플롯시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPlotSeries id="plot" labelfield="branchname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ffffff" fontweight="bold" labelposition="bottom" displayname=" 지점 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> </series> </MapChart> </rmatemapchart> 24/104

< 예제 13 플롯시리즈레이아웃예제 > < 그림 8 플롯시리즈출력모습 > 6.6. 루트시리즈 (MapRouteSeries) 루트시리즈는특정지역과지역을이어주는선을올려놓을수있는시리즈로지도에지역과지역관계선을시각적으로표현할때쓸수있는시리즈입니다. dashed 속성을통해점선을지정할수있습니다. 표시되는루트의좌표는시작과끝, 각각데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, fromhorizontalcentergapfield, tohorizontalcentergapfield 속성과 fromverticalcentergapfield, toverticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 루트시리즈는 <MapRouteSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 하위맵이동 (drilldown) 시에하위맵과상위맵을이어주는 route 는지원되지않습니다. 루트시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> 25/104

</filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapRouteSeries id="route1" fromcodefield="fc" tocodefield="code" areacodefield="factorycode" weight="1.5" labelfield="flightroute" fromhcentergapfield="fh" fromvcentergapfield="fv" tohcentergapfield="th" labelhcentergapfield="lh" labelvcentergapfield="lv" tovcentergapfield="tv" color="#7598cc" fill="#0000ff" fontweight="bold" displayname=" 공항 " dashed="true" showlabel="false" curvefield="curve">\ <labelfilters>\ <GlowFilter blurx="5" blury="5" color="#111111"/>\ </labelfilters>\ <showdataeffect>\ <SeriesZoom duration="1000"/>\ </showdataeffect>\ </MapRouteSeries>\ </series> </MapChart> </rmatemapchart> < 예제 14 루트시리즈레이아웃예제 > < 그림 9 루트시리즈출력모습 > 26/104

6.7. 스파크시리즈 (MapSparkSeries) 스파크시리즈는특정지역에스파크차트를올려놓을수있는시리즈로지도에특정위치의데이터를시각적으로표현할때쓸수있는시리즈입니다. 표시되는스파크는컬럼, 파이형태가가능합니다. 표시되는포인트의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 스파크시리즈는 <MapSparkSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. 스파크시리즈레이아웃작성예입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapSparkSeries id="spark1" type="column" datafield="[2013,2014]" color="#333333" labelposition="inside" displayname=" 지점 " columnwidthratio="1" sparkwidth="20" sparkheight="20" horizontalcentergapfield="h" verticalcentergapfield="v" radius="2" minusvaluefill="#0000ff" fill="#ffaaff" firstvaluefill="#00b0ba" lastvaluefill="#1966d8" showfirstvalue="true" showlastvalue="true" fontsize="11"> <showdataeffect> <SeriesZoom duration="1000" direction="left"/> </showdataeffect> </MapSparkSeries> </series> </MapChart> </rmatemapchart> < 예제 15 스파크시리즈레이아웃예제 > 27/104

< 그림 10 스파크시리즈출력모습 > 6.8. Div 시리즈 (MapDivSeries) Div 시리즈는특정지역에 <div> Element 를올려놓을수있는시리즈로사용자가원하는 HTML 요소를지도위에표현할때쓸수있는시리즈입니다. customseriesfunction 에서지정한함수에서 HTML 객체를리턴하게되면해당지역의 Div 에 HTML 객체가삽입됩니다. 표시되는포인트의좌표는데이터의지역코드에따라가게되는데, userevisedcenter 이 false 이면해당지역이미지의가로, 세로중심을, true 일경우에는재정의된중심 ( 맵데이타베이스에정의됨 ) 을기본으로하게되며, horizontalcentergapfield 속성과 verticalcentergapfield 속성을통해중심에서다시이동할좌표를설정할수있습니다. 생성되는 Div 의 ID 는 SVG 의 ID +MdivItem 으로 target 을통하여원하는데이터를 Div 에삽입하실수있습니다. Effect 중 Zoom 이펙트의경우 Div 의확대할경우내부의 HTML 요소가자체적으로확대가되지않기때문에 Zoom 이펙트는지원되지않습니다. Div 시리즈는 <MapDivSeries> 노드로시작과끝을나타냅니다. 이에대한속성, 스타일, 이벤트는아래의 컴포넌트별속성, 스타일, 함수및이벤트 장을참조하시기바랍니다. Div 시리즈레이아웃작성예입니다. <rmatemapchart> 28/104

<MapChart id="mainmap" drilldownenabled="true" showdatatips="false" datatipjsfunction="datatipfunction" itemclickjsfunction="itemclickfunction"> <series> <MapSeries id="mapseries" interactive="true"> <localfill> <SolidColor color="#eeeeee" /> </localfill> <filters> <DropShadowFilter distance="1" angle="45" color="0x888888"/> </filters> <stroke> <Stroke color="#aaa" weight="1" alpha="1"/> </stroke> <showdataeffect> <SeriesInterpolate duration="1000" direction="left"/> </showdataeffect> </MapSeries> <MapDivSeries id="div1" mdivwidth="35" mdivheight="35" customseriesfunction="customseries" horizontalcentergapfield="h" verticalcentergapfield="v"> <showdataeffect> <SeriesInterpolate duration="1000" direction="left"/> </showdataeffect> </MapDivSeries> </series> </MapChart> </rmatemapchart> < 예제 16 Div 시리즈레이아웃예제 > 29/104

< 그림 11 Div 시리즈출력모습 > 7. 색상 맵차트전체에서면의컬러를지정하는방법은 SolidColor, LinearGradient, RadialGradient 3 가지가있으며 SolidColor 는단색을표현하고, LinearGradient 와 RadialGradient 는두가지이상의색을이용하여그라데이션효과를표현합니다. 두그라데이션표현의차이는선형과원형이라볼수있습니다. 맵시리즈의스타일중 localfill, disabledfill, rolloverfill, selectionfill, 나머지시리즈의 fill 스타일에적용가능합니다. 선을지정하는방법은 Stroke 이있으며, 맵시리즈의스타일중 disalbedstroke, stroke, rolloverstroke, selectionstroke, 나머지시리즈의 stroke 스타일에적용가능합니다. 다음예제와샘플을참고하십시오. 7.1. 일반적인컬러 ( 단색 ) 지정하기 <MapSeries> < localfill> <SolidColor color="#ffff00 /> </ localfill>...... </ MapSeries > * 맵시리즈를예로든경우입니다. < 예제 17 맵시리즈에단색컬러를설정한경우 > 7.2. Linear 그라데이션컬러지정하기. 30/104

<MapSeries> <localfill> <LinearGradient angle="-45"> <entries> <GradientEntry color="#f3d3db" ratio="0.0"/> <GradientEntry color="#b15c9b" ratio="0.5"/> <GradientEntry color="#6b6bb1"/> </entries> </LinearGradient> </localfill>... </MapSeries> < 예제 18 맵시리즈에 Linear 그라데이션을설정한경우 > 7.3. Stroke 지정하기 <MapSeries> <stroke> <Stroke color="#444444" weight="0.25" alpha="0.25"/> </stroke>... </ MapSeries > < 예제 19 맵시리즈에 Stroke 을설정한경우 > 7.4. 그림자지정하기모든시리즈와라벨에는그림자필터를지정할수있으며, 적용할수있는그림자는 DropShadowFilter 와 GlowFilter 가있습니다. 맵차트를통해전체시리즈에그림자를지정하고자할때는맵차트의 seriesfilters 속성을통해정의하고개별시리즈에적용하고자할때는시리즈의 filters 속성에정의하고, 라벨에정의하고싶을때는시리즈의 labelfilters 속성에정의하시면됩니다. DropShadowFilter 는방향을가지는그림자이며그림자각도와거리등을조절할수있습니다. 31/104

안드로이드브라우저와사파리에서는 Filter 효과 (Shadow, Glow) 가표현되지않습니다. <MapSeries> <filters> <DropShadowFilter distance="10" angle="45" color="#4e5979"/> </filters>... </ MapSeries > < 예제 20 DropShadowFilter 예제 > 8. 클릭시불려지는함수설정하기 사용자의클릭을처리하는경우는크게두가지로맵시리즈의지역을클릭하는경우와맵시리즈외의시리즈의아이템을클릭하는경우입니다. 이는맵시리즈의클릭은하위시리즈로의이동등다른액션을동반하나이외시리즈의경우에는그런액션이없기때문이며, 다른이벤트와함수로처리되어야하기때문입니다. 8.1. 지역클릭시불려지는함수설정하기 맵차트의지역을클릭한경우해당지역의정보를스크립트로보낼수있습니다. 이는자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 맵차트에게호출할함수명을지정해줘야합니다. 레이아웃 XML 에서맵차트의속성으로 mapchangejsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 예로들면아래와같습니다. 이는맵차트의지역을클릭한경우 clickfunction 이라는함수를호출하겠다는의미입니다. 이 clickfunction 함수는자바스크립트에서반드시정의되어야합니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" mapchangejsfunction="clickfunction"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname=" 전국 "> <showdataeffect> <SeriesSlide duration="1000" direction="right"/> 32/104

</showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 21 맵차트클릭시자바스크립트함수호출하기 > < 예제 21 맵차트클릭시자바스크립트함수호출하기 > 와같이맵차트레이아웃 XML 에서맵차트클릭 시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd" [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/>  <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/>  <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script>  <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script>  <script language="javascript" type="text/javascript" src="./samplehelper.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // 데이타가 JSON 형일경우넣어줍니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; 33/104

// 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayouturlex(layouturl); document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); } // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapClickFunction.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. var dataurl = "./Data/data.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // Svg디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg이미지를지정할수있습니다.( 매뉴얼참조 ) var sourceurl = "./MapSource/KoreaSiDo.svg"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) 34/104

// 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); /* // ------------------------- 맵클릭연동사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapChart 속성을넣을때 mapchangejsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart mapchangejsfunction="clickfunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 없음 */ function clickfunction(code, label, data) { } alert("code:"+code+"\nlabel:"+label+"\ndata.sales:"+data.sales);  </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - 클릭시자바스크립트연동 </p> </div> <div class="desc"> <b></b> <button onclick="viewsrc()" style="font:11px Arial">View Source</button> </div> <div class="content">  <div id="mapholder" style="width:600px; height:480px;"> </div> </div> </body> </html> 35/104

< 예제 22 맵차트클릭시호출하는함수자바스크립트에서정의하기 > < 예제 22 맵차트클릭시호출하는함수자바스크립트에서정의하기 > 를보시면자바스크립트에서정의 한함수의파라메터는 3 개가있습니다. 파라메터명파라메터설명 code 클릭한지역코드 ( 맵데이타베이스에서지정됩니다 ) label 지역명 ( 맵데이타베이스에서지정됩니다 ) 맵데이타에서해당 code와연결된 data 입니다. (data로입력된종류에따라 XML의 data 내용또는배열이됩니다 ) < 표 4 맵차트클릭시호출하는함수의파라메터설명 > 지금까지맵차트의한지역을클릭한경우자바스크립트의 clickfunction 함수를호출하게 설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워맵차트로부터넘어온 파라메터를보여주고있습니다. < 그림 12 맵차트클릭시함수호출실행화면 > 8.2. 시리즈아이템클릭시불려지는함수설정하기 맵시리즈를제외한나머지시리즈에대해서는아이템 ( 시리즈에서표시한객체를의미합니다 ) 을클릭한 36/104

경우해당아이템의정보를스크립트로보낼수있습니다. 먼저, 맵차트에서호출할함수명을지정해줘야합니다. 레이아웃 XML 에서맵차트의속성으로 itemclickjsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 이는맵시리즈를제외한시리즈의아이템을클릭한경우 itemclickfunction 이라는함수를호출하겠다는의미입니다. 이 itemclickfunction 함수는자바스크립트에서반드시정의되어야합니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" itemclickjsfunction="itemclickfunction"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPlotSeries id="plot" labelfield="branchname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ffffff" fontweight="bold" labelposition="bottom" displayname=" 지점 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> </series> </MapChart> </rmatemapchart> < 예제 23 시리즈아이템클릭시자바스크립트함수호출하기 > < 예제 23 시리즈아이템클릭시자바스크립트함수호출하기 > 과같이맵차트레이아웃 XML 에서아이템클릭시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-37/104

transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd" [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/>  <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/>  <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script>  <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script>  <script language="javascript" type="text/javascript" src="./samplehelper.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // 데이타가 JSON 형일경우넣어줍니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { 38/104

} document.getelementbyid(id).setlayouturlex(layouturl); document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapPlotSeries.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. var dataurl = "./Data/branchdata.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // Svg디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg이미지를지정할수있습니다.( 매뉴얼참조 ) var sourceurl = "./MapSource/KoreaSiDo.svg"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); /* // ------------------------- 지역데이타팁사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapChart 속성을넣을때 datatipjsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart datatipjsfunction="datatipfunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할데이타팁문자열 39/104

*/ function datatipfunction(seriesid, code, label, data) { if (seriesid == "plot") { return data.branchname + " - " + data.address; } else return label; } /* // ------------------------- 맵클릭연동사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapChart 속성을넣을때 itemclickjsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart itemclickjsfunction="itemclickfunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 없음 */ function itemclickfunction(seriesid, code, label, data) { } alert("code:"+code+"\nlabel:"+label+"\naddress:"+data.address);  </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - 지점클릭시자바스크립트연동 </p> </div> <div class="desc"> <b></b> <button onclick="viewsrc()" style="font:11px Arial">View Source</button> </div> <div class="content">  <div id="mapholder" style="width:600px; height:480px;"> 40/104

</body> </html> </div> </div> </div> < 예제 24 시리즈아이템클릭시호출하는함수자바스크립트에서정의하기 > < 예제 24 시리즈아이템클릭시호출하는함수자바스크립트에서정의하기 > 를보시면자바스크립트에서 정의한함수의파라메터는 4 개가있습니다. 파라메터명파라메터설명 seriesid 레이아웃 XML에서부여한시리즈 (Series) 의 id가있을경우, 해당 id 입니다. code 클릭한지역코드 ( 맵데이타베이스에서지정됩니다 ) label 지역명맵데이타에서해당 code와연결된 data 입니다. (data로입력된종류에따라 XML의 data 내용또는배열이됩니다 ) < 표 5 시리즈아이템클릭시호출하는함수의파라메터설명 > 지금까지시리즈의한아이템을클릭한경우자바스크립트의 itemclickfunction 함수를호출하게 설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워시리즈로부터넘어온 파라메터를보여주고있습니다. 41/104

< 그림 13 시리즈아이템클릭시함수호출실행화면 > 8.3. 하위맵상태에서상위맵버튼, 지도외부클릭시불려지는함수설정하기 맵차트하위맵으로이동한상태에서상위맵으로이동하는버튼을클릭하거나지도외부를클릭하여상위맵으로이동하게될경우자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 맵차트에게호출할함수명을지정해줘야합니다. 레이아웃 XML 에서맵차트의속성으로 backtomapjsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 예로들면아래와같습니다. 이는맵차트의지역을클릭한경우 backfunction 이라는함수를호출하겠다는의미입니다. 이 backfunction 함수는자바스크립트에서반드시정의되어야합니다. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="false" backtomapjsfunction="backfunction"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname=" 전국 "> <showdataeffect> <SeriesSlide duration="1000" direction="right"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> 42/104

</series> </MapChart> </rmatemapchart> < 예제 25 상위맵버튼, 지도외영역클릭시자바스크립트함수호출하기 > < 예제 21 맵차트클릭시자바스크립트함수호출하기 > 와같이맵차트레이아웃 XML 에서상위맵버튼클릭시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd" [ <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/>  <link rel="stylesheet" type="text/css" href="./rmatemapcharth5sample.css"/>  <script language="javascript" type="text/javascript" src="../licensekey/rmatemapcharth5license.js"></script>  <script language="javascript" type="text/javascript" src="../rmatemapcharth5/js/rmatemapcharth5.js"></script>  <script language="javascript" type="text/javascript" src="./samplehelper.js"></script> <script type="text/javascript"> // rmate 맵차트생성준비가완료된상태시호출할함수를지정합니다. var mapvars = "rmateonloadcallfunction=chartreadyhandler"; // 데이타가 JSON 형일경우넣어줍니다. ( 설정을안할경우 xml 로인식하여오류가발생합니다 ) mapvars += "&datatype=json"; // 맵차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 맵차트준비가완료된경우이함수가호출됩니다. // 이함수를통해맵차트에레이아웃과데이터를삽입합니다. 43/104

// 파라메터 : id - rmatemapcharth5.create() 사용시사용자가지정한 id 입니다. // 맵차트콜백함수 7개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setmapdatabase - 스트링으로작성된 MapData XML을삽입합니다. // 4. setlayouturlex - 레이아웃 XML 경로를지시합니다. // 5. setdataurlex - 데이터 XML 경로를지시합니다. // 6. setmapdatabaseurlex - MapData XML 경로를지시합니다. // 7. setsourceurlex - Map Source 경로를지시합니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayouturlex(layouturl); document.getelementbyid(id).setdataurlex(dataurl); document.getelementbyid(id).setmapdatabaseurlex(mapdatabaseurl); document.getelementbyid(id).setsourceurlex(sourceurl); } // MapChart 레이아웃 URL 경로. 반드시설정하십시오. var layouturl = "./LayoutXml/LayoutMapClickFunction.xml"; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. var dataurl = "./Data/data.txt"; // Map Data 경로정의 // setmapdatabase 함수로 mapdatabase 를문자열로넣어줄경우주석처리나삭제하십시오. var mapdatabaseurl = "./MapDataBaseXml/KoreaSiDo.xml"; // MapChart Source 선택 // Svg디렉토리의지도이미지중택일가능하며, 이외에사용자가작성한별도의 Svg이미지를지정할수있습니다.( 매뉴얼참조 ) var sourceurl = "./MapSource/KoreaSiDo.svg"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%"); 44/104

/* // ------------------------- 맵클릭연동사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapChart 속성을넣을때 mapchangejsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart mapchangejsfunction="clickfunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 없음 */ function backfunction(code, label, data) { } alert("back to main map );  </script> </head> <body> <div class="container"> <div class="header"> <p>rmatemapcharth5 예제 - 클릭시자바스크립트연동 </p> </div> <div class="desc"> <b></b> <button onclick="viewsrc()" style="font:11px Arial">View Source</button> </div> <div class="content">  <div id="mapholder" style="width:600px; height:480px;"> </div> </div> </body> </html> < 예제 26 상위맵버튼, 지도외영역클릭시호출하는함수자바스크립트에서정의하기 > 45/104

지금까지맵차트의상위맵버튼, 지도외영역을클릭한경우자바스크립트의 backfunction 함수를 호출하게설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워 backfunction 에 설정된 alert 창을보여주고있습니다. < 그림 14 상위맵버튼, 지도외영역클릭시함수호출실행화면 > 9. 사용자정의함수설정하기 사용자정의함수를설정할수있는경우는총 5 가지가존재합니다. 1. 데이터팁사용자정의 2. 라벨 ( 지역명 ) 사용자정의 3. 타이틀사용자정의 4. 지역색사용자정의 5. 채우기색사용자정의 6. 지역외곽선색사용자정의 자바스크립트함수를정의하고레이아웃에그함수명을지시하여맵차트가해당함수를호출하는원리로 46/104

사용자정의함수가적용됩니다. 9.1. 데이터팁 ( 툴팁 ) 함수사용자정의. 맵차트에서 showdatatips 속성을 true 로설정후마우스오버시보이는데이터팁을사용자정의할수있습니다. 맵차트에서마우스오버이벤트가발생하면레이아웃에서미리지정된 datatipjsfunction 함수를호출하여그함수가리턴하는값을데이터팁으로표시하게됩니다. 레이아웃 XML 에서 datatipjsfunction 속성을추가하고속성값으로자바스크립트함수명을지정하십시오. 이자바스크립트함수는맵차트에마우스오버시 rmate MapChart 가호출할콜백함수입니다. 다음예제는데이터팁을사용자정의한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true" datatipjsfunction="datatipfunction"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname="map Series"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 27 데이터팁사용자정의레이아웃예제 > 레이아웃에서자바스크립트콜백함수를등록한후 rmate MapChart 를임베딩하는파일, 예를들면 html, jsp, php 파일에서다음과같이콜백함수를실제로정의하십시오. /* // ------------------------- 지역데이타팁사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapChart 속성을넣을때 datatipjsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapChart datatipjsfunction="datatipfunction"> // // 파라메터설명 // seriesid : Series의 id 47/104

// code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할데이타팁문자열 */ function datatipfunction(seriesid, code, label, data) { if (seriesid == "plot") { return data.branchname + " - " + data.address; } else return label; } < 예제 28 자바스크립트데이터팁콜백함수예제 > <br> 태그사용시줄바꿈으로인식되어다음줄로표현됩니다. 다음은자바스크립트콜백함수를정의할때함께정의되어야할함수파라메터에대한설명입니다. 파라메터명파라메터설명 seriesid 레이아웃 XML에서부여한시리즈 (Series) 의 id가있을경우, 해당 id 입니다. code 클릭한지역코드 ( 맵데이타베이스에서지정됩니다 ) label 지역명맵데이타에서해당 code와연결된 data 입니다. (data로입력된종류에따라 XML의 data 내용또는배열이됩니다 ) < 표 6 데이터팁사용자정의콜백함수파라메터설명 > 48/104

b < 그림 15 데이터팁사용자정의실행모습 > 9.2. 라벨사용자정의 labeljsfunction 속성을가지고있는시리즈 ( 맵시리즈, 버블시리즈, 이미지시리즈, 플롯시리즈 ) 에대해자바스크립트로라벨을변형시키기위해 labeljsfunction 속성을정의하고자바스크립트콜백함수명을지정합니다. 라벨이외에스타일을변형하기위해서는반환값을객체로지정하면됩니다. - 반환값 Object 로사용시 {"text": 라벨, "color": 라벨색상, "fontsize": 폰트사이즈, "fontfamily": 폰트종류, "fontweight": 폰트굵기, "fontstyle": 폰트스타일, "lineheight": 줄바꿈 (<br>) 사용시줄간격 } (Samples 폴더의 LabelJsFunction2.html 를참고하시기바랍니다. 다음은라벨을사용자정의하기위해설정한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" labelposition="inside" hideoversizelabel="false" labeljsfunction="labelfunction"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> 49/104

<SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 29 라벨사용자정의레이아웃예제 > /* // ------------------------- 지역라벨사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapSeries 속성을넣을때 labeljsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapSeries labeljsfunction="labelfunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할라벨문자열 // 반환값 Object로사용시 // {"text": 라벨, "color": 라벨색상, "fontsize": 폰트사이즈, "fontfamily": 폰트종류, "fontweight": 폰트굵기, "fontstyle": 폰트스타일, "lineheight": 줄바꿈 (<br>) 사용시줄간격 } */ function labelfunction(seriesid, code, label, data) { if (code == "900") return label+" 특별시 "; else if ((code >= "500" && code <= "800") code == "1000" code == "1100") return label+" 광역시 "; return label; } < 예제 30 라벨자바스크립트콜백함수정의예제 > 50/104

< 그림 16 라벨사용자정의실행모습 > <br> 태그사용시줄바꿈으로인식되어다음줄로표현됩니다. 9.3. 타이틀사용자정의 titlejsfunction 속성을가지고있는시리즈 ( 판넬시리즈 ) 에대해자바스크립트로타이틀을변형시키기위해 titlejsfunction 속성을정의하고자바스크립트콜백함수명을지정합니다. 다음은타이틀을사용자정의하기위해설정한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <localfill> <SolidColor color="#eeeeee"/> </localfill> <stroke> 51/104

<Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPanelSeries id="panel" titlejsfunction="titlefunction" bodytextfield="temperature" horizontalcentergapfield="h" verticalcentergapfield="v" color="#555555" horizontalalign="right" displayname=" 날씨 "> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapPanelSeries> </series> </MapChart> </rmatemapchart> < 예제 31 타이틀사용자정의레이아웃예제 > /* // ------------------------- 타이틀사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapPanelSeries 속성을넣을때 titlejsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapPanelSeries titlejsfunction="titlefunction"> // // 파라메터설명 // seriesid : Series의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할라벨문자열 */ function titlefunction(seriesid, code, label, data) { if (data.id == "w01") return " 영동 "; else if (data.id == "w02") return " 영서 "; return label; } < 예제 32 타이틀자바스크립트콜백함수정의예제 > 52/104

< 그림 17 타이틀사용자정의실행모습 > 9.4. 지역색사용자정의 맵시리즈의지역채우기색 (localfill) 을어떤조건에따라또는기호에맞게사용자정의하고자하는경우맵시리즈속성 localfilljsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 함수의리턴값은단일색의경우색의컬러값이되며그외에 LinearGradient 나 RadialGradient 일때는다음형식으로넣어주면됩니다. 패턴일경우에는제품내 rmatemapcharth5/assets/pattern 에있는파일명을문자열로반환하시면됩니다. (both, circle, circle2, cross, diagonal, diagonal_ltr, diagonal_rtl, diamond, down_triangle, horizontal, horizontal_curve, horizontal_pipe, rectangle, rectangle2, right, triangle, up, vertical,vertical_curve, vertical_pipe. - LinearGradient 일경우 1. [#FFFF00,#0000FF] : 원하는색을배열로만들어리턴 2. [{"class":"lineargradient","angle":45,"entries":[{"color":"#ff0000","ratio":0,"alpha":0.5},{"color":"#00ff 00","ratio":0.3,"alpha":0.5},{"color":"#0000FF","ratio":1,"alpha":0.5}]}] : 원하는 LinearGradient 를속성을넣어준후배열형태로리턴 (LinearGradient 에대한속성은컴포넌트별속성, 스타일, 함수및이벤트를참조하시기바랍니다 ) - RadialGradient 일경우 [{"class":"radialgradient","angle":45,"entries":[{"color":"#ff0000","ratio":0,"alpha":0.5},{"color":"#00f F00","ratio":0.3,"alpha":0.5},{"color":"#0000FF","ratio":1,"alpha":0.5}]}] : 원하는 RadialGradient 를속성을넣어준후배열현태로리턴 (RadialGradient 에대한속성은컴포넌트별속성, 스타일, 함수및이벤트를참조하시기바랍니다 ) 다음은맵시리즈의지역색을사용자정의한레이아웃예제입니다. 53/104

<rmatemapchart> <MapChart id="mainmap"> <series> <MapSeries id="mapseries" localfilljsfunction="colorfunction"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 33 지역색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // ------------------------- 지역이미지색상사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapSeries 속성을넣을때 localfilljsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapSeries localfilljsfunction="colorfunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할색상 */ function colorfunction(code, label, data) { if (code == "100" data.sales < 30) return #FF0000; else if (code == "900" data.sales < 50) return #FF6600; else if (code == "1500" data.sales < 90) 54/104

else return #FFCC00; return #FFFF00; } < 예제 34 지역색자바스크립트콜백함수예제 > < 그림 18 지역색사용자정의화면 > 9.5. 아이템채우기색사용자정의 시리즈의아이템채우기색 (fill) 을어떤조건에따라또는기호에맞게사용자정의하고자하는경우해 당 Series 속성 filljsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 다음은판넬시리즈의아이템채우기색을사용자정의한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" displayname="map Series"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> 55/104

<stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPanelSeries id="panel" titlefield="label" bodytextfield="temperature" horizontalcentergapfield="h" verticalcentergapfield="v" color="#555555" horizontalalign="right" filljsfunction="fillfunction" displayname=" 날씨 "> <showdataeffect> <SeriesSlide duration="1000"/> </showdataeffect> </MapPanelSeries> </series> </MapChart> </rmatemapchart> < 예제 35 아이템채우기색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // ------------------------- 아이템색상사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapSeries 이외의 Series속성을넣을때 filljsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapPanelSeries filljsfunction="fillfunction"> // // 파라메터설명 // seriesid : MapSeries의 id // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할색상 */ function fillfunction(seriesid, code, label, data) { if (data.temperature < 8) return #FF0000; else if (data.temperature < 10) return #FF6600; else if (data.temperature < 14) return #FFCC00; else return #FFFF00; 56/104

} < 예제 36 아이템채우기색자바스크립트콜백함수예제 > < 그림 19 아이템채우기색사용자정의화면 > 9.6. 지역외곽선색사용자정의 맵시리즈의지역외곽선색 (Stroke) 을어떤조건에따라또는기호에맞게사용자정의하고자하는경우맵시리즈속성 strokejsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 함수의리턴값은단일색의경우색의컬러값이되며그외에선굵기를변경하기위해서는다음과같이지정하시면됩니다. - 선색상과선굵기를지정하는경우 1. 반환값을객체형태로지정함 2. { color : 색상, width : 굵기 } 다음은맵시리즈의지역외곽선색을사용자정의한레이아웃예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" selectionmarking="line" displayname="map Series" strokejsfunction="strokefunction"> <filters> 57/104

<DropShadowFilter distance="1" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#f9f9f9" weight="0.8" alpha="1"/> </stroke> </MapSeries> </series> </MapChart> </rmatemapchart> < 예제 37 지역외곽선색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // ------------------------- 지역외곽선색상사용자정의함수 ----------------------------------------------------- // layout XML 에서 MapSeries 속성을넣을때 strokejsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <MapSeries strokejsfunction="strokefunction"> // // 파라메터설명 // code : 지역코드 (mapdatabaseurl의파일참조 ) // label : 지역명. // data : 해당지역코드로 dataurl을통해전달된데이타 // // 반환값 // 해당지역에표시할색상 */ function strokefunction(code, label, data) { if (code == "100" data.sales < 30) return {"color":"#88ff88","width":3}; else if (code == "900" data.sales < 50) return {"color":"#ff8888","width":5}; else if (code == "1500" data.sales < 90) return "#407efb"; else return "#3057d4"; } < 예제 38 지역외곽선색자바스크립트콜백함수예제 > 58/104

< 그림 20 지역외곽선색사용자정의화면 > 10. 범례 (Legend) 넣기. 맵차트의범례 (Legend) 는두종류로맵차트의시리즈를표현하는경우와지역색에의한범례처럼사용자 직접범위를표시하여작성하는경우가가능합니다. 첫번째시리즈를표시하는경우에는 Legend 의 dataprovider 속성에 MapChart 의 id 를넣어주면자동으로 Legend 에서 MapChart 의시리즈를추출하여범례를표시하게됩니다. 또한시리즈의속성인 displayname 을정의하여야하며여기서정의한문자열이범례의텍스트로출력됩니다. 두번째경우에는사용자가직접 LegendItem 을사용하여범례의내용을정의하여표시해줘야합니다. 다음은시리즈의내용을이용하여범례를표시한예제입니다. <rmatemapchart horizontalalign="center"> <MapChart id="mainmap> <series> <MapSeries id="mapseries" interactive="false"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> 59/104

<stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> <MapPlotSeries id="plot1" areacodefield="branchcode" labelfield="branchname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ffffff" fontweight="bold" labelposition="bottom" displayname=" 지점 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> <MapPlotSeries id="plot2" areacodefield="factorycode" labelfield="factoryname" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="5" labelpositionfield="lapos" color="#ddaaaa" fontweight="bold" labelposition="bottom" itemrenderer="triangleitemrenderer" displayname=" 공장 "> <labelfilters> <GlowFilter blurx="5" blury="5" color="#111111"/> </labelfilters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </MapPlotSeries> </series> </MapChart> <Legend dataprovider="{mainmap}" usevisiblecheck="true" horizontalgap="3" direction="horizontal" borderstyle="solid" bordercolor="#999999"/> </rmatemapchart> < 예제 39 시리즈로범례만들기 > 60/104

< 그림 21 시리즈로범례만들기화면 > 다음은사용자가직접 LegendItems 을이용하여범례를정의한예제입니다. <rmatemapchart> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname="map Series" localfilljsfunction="colorfunction"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> </MapChart> <Box width="100%" horizontalalign="center" paddingtop="20"> <SubLegend direction="horizontal" borderstyle="solid" bordercolor="#999999" backgroundcolor="#ffffff"> <LegendItem label="30이하 "> <fill> <SolidColor color="#ff0000"/> 61/104

</fill> </LegendItem> <LegendItem label="50이하 "> <fill> <SolidColor color="#ff6600"/> </fill> </LegendItem> <LegendItem label="90이하 "> <fill> <SolidColor color="#ffcc00"/> </fill> </LegendItem> <LegendItem label="90이상 "> <fill> <SolidColor color="#ffff00"/> </fill> </LegendItem> </SubLegend> </Box> </rmatemapchart> < 예제 40 사용자정의범례만들기 > < 그림 22 사용자정의범례만들기화면 > 62/104

11. 데이터영역범례 (DataRangeLegend) 넣기. 맵차트의데이터영역범례 (Legend) 는맵차트의시리즈를표현하는경우와지역색에의한범례처럼 사용자직접범위를표시하여작성하는경우가가능하며설정한데이터값을기준으로데이터영역 형태로범례에표시합니다. 다음은시리즈의내용을이용하여범례를표시한예제입니다. <?xml version="1.0" encoding="utf-8"?> <rmatemapchart horizontalalign="center"> <MapChart id="mainmap" showdatatips="true"> <series> <MapSeries id="mapseries" selectionmarking="line" labelposition="inside" displayname="map Series" localfillbyrange="[#ffff00, #ffffee,#ff0000]" rangelegenddatafield="sales" localfilljsfunction="colorfunction"> <filters> <DropShadowFilter distance="1" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#fff" weight="0.8" alpha="1"/> </stroke> </MapSeries> </series> </MapChart> <DataRangeLegend width="200" height="30" minimum="0" maximum="250" datarangeheight="15" fontsize="10" arrowoffset="0" interval="50" showarrow="true" tickgap="5" stroke="#000000" arrowcolor="#ffffff" arrowstroke="#000000" colors = "[#ffff00, #ffffee,#ff0000]"/> </rmatemapchart> < 예제 41 시리즈로데이터영역범례만들기 > 63/104

< 그림 23 시리즈로데이터영역범례만들기화면 > 12. 고급사용자를위한기능 12.1. 맵차트생성시효과적용하기. 맵차트고유의 effect 에는 SeriesInterpolate, SeriesSlide, SeriesZoom 의 3 종류가있습니다. 개별시리즈에 effect 가적용되며, 데이터가화면에표시될때 effect 가적용됩니다. SeriesInterpolate : 맵차트의시리즈계열에서자신이받은수치를표현하기위해초기값 (0) 에서자신의수치로이동하는모습을나타내는이펙트입니다. SeriesSlide : 맵차트의시리즈가오른쪽에서왼쪽으로미끄러지듯나타는이펙트입니다. SeriesZoom : 맵차트의시리즈가점점커지면서나타나는이펙트입니다. 다음과같이효과의설정이가능합니다. <rmatemapchart> <MapChart> <MapSeries> <showdataeffect> 64/104