rMateMapChart 사용설명서

Size: px

Start display at page:

Download "rMateMapChart 사용설명서"

경숙 순
7 years ago
Views:

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

2 목차 1. 개요 rmate MapChart for HTML5 의주요특징 제품구성정보 시스템요구사항 맵차트시스템구성환경설명 기본적인 rmate MapChart 생성 rmate MapChart 라이선스등록하기 제공된샘플을토대로맵차트생성하기 맵차트데이터 맵소스 맵데이타베이스 맵데이타 맵차트레이아웃 rmate MapChart 에서레이아웃의역할 레이아웃작성방법에대하여 레이아웃의 rmatemapchart 노드설정하기 레이아웃의 Style 노드 (CSS 적용 ) 설정하기 맵차트설정및연동방식 mapvars 설정 맵차트에접근가능한함수들 시리즈 맵시리즈 (MapSeries) 버블시리즈 (MapBubbleSeries) 이미지시리즈 (MapImageSeries) 판넬시리즈 (MapPanelSeries) 플롯시리즈 (MapPlotSeries) 루트시리즈 (MapRouteSeries) 스파크시리즈 (MapSparkSeries) Div 시리즈 (MapDivSeries) 색상 일반적인컬러 ( 단색 ) 지정하기 Linear 그라데이션컬러지정하기 Stroke 지정하기 그림자지정하기 /104

3 8. 클릭시불려지는함수설정하기 지역클릭시불려지는함수설정하기 시리즈아이템클릭시불려지는함수설정하기 하위맵상태에서상위맵버튼, 지도외부클릭시불려지는함수설정하기 사용자정의함수설정하기 데이터팁 ( 툴팁 ) 함수사용자정의 라벨사용자정의 타이틀사용자정의 지역색사용자정의 아이템채우기색사용자정의 지역외곽선색사용자정의 범례 (Legend) 넣기 데이터영역범례 (DataRangeLegend) 넣기 고급사용자를위한기능 맵차트생성시효과적용하기 맵네비게이터표시하기 GIS 좌표로표시하기 맵소스의편집및제작 SVG 컴포넌트별속성, 스타일, 함수및이벤트 MapChart MapSeries MapBubbleSeries MapImageSeries MapPlotSeries MapPanelSeries MapRouteSeries MapSparkSeries MapDivSeries Legend LegendItem SubLegend DataRangeLegend SolidColor LinearGradient RadialGradient GradientEntry MapNavigator /104

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

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

6 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

7 < 예제 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" " <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <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

8 // 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

9 <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" " 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

10 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

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

12 다음은이런과정을다이어그램으로표현한것입니다. 레이아웃 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

13 그러나사용자의편의를위해 < 예제 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

14 "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 에대한속성은맵차트의바탕을표현해야하는경우에만사용하면되며, 기본적으로 별도의속성을주실필요는없습니다 레이아웃의 Style 노드 (CSS 적용 ) 설정하기 <Style> 노드는전반적인스타일을미리정의하는스타일시트이며, html 에서사용하는 CSS 와동일한정 의를사용합니다. <Style/> 을선언하는방법에는몇가지규칙이있습니다. 첫째, <Style/> 노드는반드시 <rmatemapchart> 노드의자식위치에정의하십시오. 둘째, 스타일네임을정의할때시작은도트 (.) 을찍고소문자로시작하는영문자로표기하십시오. 셋째, 스타일네임을정한후그에따른구체적인스타일을정의할때는반드시중괄호 ({,}) 로시작과끝을표시하십시오. 넷째, 속성명과속성값 (value) 의구분은콜론 (:) 이며끝은세미콜론으로나타냅니다. 14/104

15 다음은올바른예와잘못된예를나타낸것입니다. <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

16 스타일을활용한예제와출력모습은아래와같습니다. <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 를사용합 니다. 이의사용법및기본변수에대해서설명하겠습니다 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

17 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

18 6. 시리즈 rmate MapChart 는 1 개의 MapChart 에여러개의시리즈를포함하여구성됩니다. 이때포함될수있는시리즈는아래나열된여러종류의시리즈가될수있으며맵시리즈를제외한나머지시리즈는중복되어포함될수있습니다 맵시리즈 (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

19 < 예제 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

20 </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

21 이미지시리즈는특정지역에이미지를올려놓을수있는시리즈로지역별사진을시각적으로표현할때쓸수있는시리즈입니다. 이미지의 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

22 </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"/>

23 <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

24 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 속성을통해점선을지정할수있습니다.

25 < 예제 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

26 </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

27 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 객체가삽입됩니다.

28 < 그림 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">

29 <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

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

31 <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

32 안드로이드브라우저와사파리에서는 Filter 효과 (Shadow, Glow) 가표현되지않습니다. <MapSeries> <filters> <DropShadowFilter distance="10" angle="45" color="#4e5979"/> </filters>... </ MapSeries > < 예제 20 DropShadowFilter 예제 > 8. 클릭시불려지는함수설정하기 사용자의클릭을처리하는경우는크게두가지로맵시리즈의지역을클릭하는경우와맵시리즈외의시리즈의아이템을클릭하는경우입니다. 이는맵시리즈의클릭은하위시리즈로의이동등다른액션을동반하나이외시리즈의경우에는그런액션이없기때문이며, 다른이벤트와함수로처리되어야하기때문입니다 지역클릭시불려지는함수설정하기 맵차트의지역을클릭한경우해당지역의정보를스크립트로보낼수있습니다. 이는자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 맵차트에게호출할함수명을지정해줘야합니다. 레이아웃 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

33 </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" " transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <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

34 // 맵차트의속성인 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

35 // 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

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

37 경우해당아이템의정보를스크립트로보낼수있습니다. 먼저, 맵차트에서호출할함수명을지정해줘야합니다. 레이아웃 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" "

38 transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <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

39 } 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

40 */ 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

41 </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. 하위맵상태에서상위맵버튼, 지도외부클릭시불려지는함수설정하기 맵차트하위맵으로이동한상태에서상위맵으로이동하는버튼을클릭하거나지도외부를클릭하여상위맵으로이동하게될경우자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 맵차트에게호출할함수명을지정해줘야합니다.

42 < 그림 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

43 </series> </MapChart> </rmatemapchart> < 예제 25 상위맵버튼, 지도외영역클릭시자바스크립트함수호출하기 > < 예제 21 맵차트클릭시자바스크립트함수호출하기 > 와같이맵차트레이아웃 XML 에서상위맵버튼클릭시호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " [ <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

44 // 파라메터 : 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

45 /* // 맵클릭연동사용자정의함수 // 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.

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

47 사용자정의함수가적용됩니다 데이터팁 ( 툴팁 ) 함수사용자정의. 맵차트에서 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

48 // 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

49 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

50 <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

51 < 그림 16 라벨사용자정의실행모습 > <br> 태그사용시줄바꿈으로인식되어다음줄로표현됩니다 타이틀사용자정의 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

52 <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

53 < 그림 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

54 <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

55 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

56 <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

57 } < 예제 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

58 <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

59 < 그림 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

60 <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

61 < 그림 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>

62 </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

63 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 가적용됩니다.

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

65 <SeriesSlide duration="1000" // 구체적으로이펙트설정한경우.. direction="down" minimumelementduration="20" perelementoffset= 0 elementoffset="30"/> </showdataeffect> </ MapSeries> <MapBubbleSeries radiusfield="cost"> <showdataeffect> < SeriesSlide /> // 기본값만적용하여이펙트설정한경우. </showdataeffect> </ MapBubbleSeries> </rmatemapchart> < 예제 42 SeriesSlide 로이펙트설정한예제 > 위에작성한예제의이펙트는다음과같이실행됩니다. 각엘리먼트는전의엘리먼트의 30 밀리세컨드후에개시해, 각각의슬라이드를완료하는데 20 밀리세컨드가걸립니다. effect 전체에서는, 데이터계열이모두슬라이드할때까지 1 초 (1000 밀리세컨드 ) 걸립니다. 슬라이딩해오는방향은아래입니다. 이펙트의경우사용자의컴퓨터사양에따라제대로표시가안되는경우가생기며, 이때는표시할이미지의개수와관련이됩니다. 따라서많은이미지를포함하는지도의경우에는이펙트가사용자에게오히려불편을줄수있으므로이펙트사용에신중을기하시기바랍니다 맵네비게이터표시하기 맵차트에서지도의축소, 확대, 이동을버튼으로처리할수있는맵네이게이터를사용할수있습니다. 맵네비게이터는 MapNavigator 노드의정의로사용이가능합니다. 다음과같이레이아웃을작성하고맵차트의 annotationelements 속성에 MapNavigator 를설정하십시오. <rmatemapchart> <MapChart id="mainmap" drilldownenabled="true" scalemode="manual"> <series> <MapSeries id="mapseries" interactive="true" selectionmarking="line" color="#777777" displayname="map"> <filters> <DropShadowFilter distance="2" angle="45" color="#888888"/> </filters> 65/104

66 <stroke> <Stroke color="#ffffff" weight="0.25" alpha="0.5"/> </stroke> </MapSeries> </series> <annotationelements> <MapNavigator/> </annotationelements> </MapChart> </rmatemapchart> < 예제 43 맵네비게이터표시예제 > GIS 좌표로표시하기 맵차트에서 GIS 좌표를이용하여아이템을표현할수있습니다. <MapSereis> 와해당시리즈에 usegis 속성을 true 로추가하신뒤맵데이터에 lat( 위도 ), lng( 경도 ) 를추가하면설정된 code 의지역에아이템이표시됩니다. GIS 데이터는 WGS84 좌표계를이용하셔야합니다. 다음과같이레이아웃과데이터를설정하시면됩니다. - 레이아웃 <rmatemapchart> <MapChart id="mainmap1" showdatatips="true" > <series> <MapSeries id="mapseries" interactive="true" selectionmarking="line" color="#777777" labelposition="none" displayname="map" usegis="true"> <filters> <DropShadowFilter distance="1" angle="45" color="#888888"/> </filters> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> <stroke> <Stroke color="#bbbbbb" weight="0.8" alpha="1"/> </stroke> </MapSeries> <MapPlotSeries id="plot1" areacodefield="code" labelfield="address" horizontalcentergapfield="h" verticalcentergapfield="v" adjustedradius="15" fill="#00ff00" color="#00e000" fontweight="bold" labelposition="bottom" displayname=" 지점 " rangelegenddatafield="value" usegis="true"> <showdataeffect> <SeriesZoom duration="1000" /> 66/104

67 </showdataeffect> </MapPlotSeries> </series> </MapChart> </rmatemapchart> - 데이터 // 서울구지도 (90000) 에위도 , 경도 지역에아이템표시 var mapdata = [{"code":"90000","address":" 강남구청 ","lat": ,"lng": }]; < 예제 444 맵네비게이터표시예제 > 13. 맵소스의편집및제작 SVG SVG(Scalable Vector Graphics) 는 2 차원벡터그래픽을표현하기위한 XML 기반의파일형식으로, 1999 년 W3C(World Wide Web Consortium) 의주도하에개발된오픈표준의벡터그래픽파일형식입니다. SVG 형식의이미지와그작동은 XML 텍스트파일들로정의되어검색화, 목록화, 스크립트화가가능합니다. 맵소스에사용되는파일은 SVG 포맷으로구성되어있으며편집가능한툴을사용하여변형및제작이 가능합니다. 이때제작되는 SVG 파일들은전체 SVG 에서지원되는기능중일부만을이용하며, 지도의 위치및변화를처리하기위해다음과같은제약사항을가지고있으니편집시참고하시기바랍니다. 1. 라이브러리기능을사용하여만든이미지는읽히지않습니다. 2. 사용가능한개체는 Path, Rectangle, Group 이며이외의개체는표시되지않습니다. 3. 개체에주어진 Name 속성은맵데이타베이스의심볼명과일치하여만읽혀지며, Group 에주어진 Name 은하위에포함되어있는 Path, Rectangle 을함께읽어하나의이미지로처리됩니다. 4. 같은화면에나타나야하는이미지들은반드시같은 depth 의레이어또는 Group 에포함되어야합니다. 다른레이어나 Group 에존재할경우좌표가일치하지않아다른위치에이미지가표시됩니다. 5. 개체의 Name 은전체 SVG 에서유일하여야하며동일한 Name 의개체가여러개일경우맨처음개체만화면에나타나게됩니다. 6. 이미지에표시한 Stroke 관련설정은모두무시되며맵시리즈에서설정한 Stroke 으로대체됩니다. 7. 표시되는색상은 RGB 값이어야합니다. 8. Preferences -> Units 에서 Identify Object 는 XML ID 로설정되어야하며개체에설정한 Name 이저장된 SVG path 에 id 속성으로저장되어야합니다. SVG 의 path id 확인은메모장으로 SVG 파일을열어서확인하실수있습니다. 67/104

68 9. 맵소스를통해읽어들인이미지의기본배율은제작툴 (illustrator) 에서 100% 배율로봤을때의크기와동일하니적당한크기로조정하시기바랍니다. 10. 맵시리즈의 localfill 이나 localfillfunction 속성이설정되지않아특정한색상을지정하지않을때는 SVG 상에지정한색상이사용되오니 SVG 에서색상을자유롭게설정하실수있습니다. 11. 위의제작방식에따라이미작성된 SVG 파일이샘플에포함되어있으니제작시에참고바랍니다. 14. 컴포넌트별속성, 스타일, 함수및이벤트 MapChart 실제맵차트를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 맵데이타의 지역코드 필드명. MapChart areacodefield String 에서지정하면하위의시리즈에기본으로적용됩니다. ( 기본값 : code) backimagex Number( 기본값 :10) 서브맵에서뒤로가기이미지가나타날 x 좌표 backimagey Number( 기본값 :10) 서브맵에서뒤로가기이미지가나타날 y 좌표 centerx Number( 기본값 :0) 중앙지점의 x 좌표 centery Number( 기본값 :0) 중앙지점의 y 좌표 chartscalex Number( 기본값 :1) 0.1 에서 25 까지 X 축에적용할스케일 chartscaley Number( 기본값 :1) 0.1 에서 25 까지 Y 축에적용할스케일 dataprovider Object 표시할데이터세트입니다초기에 dataurl 이나 setdata 함수에의해넣어집니다. drilldownenabled Boolean(true) 클릭시하위맵 ( 시, 도표시 ) 표시가능여부맵데이타베이스에서하위맵이설정되어있을경우하위맵으로이동합니다. 데이터팁 ( 툴팁 ) 을 사용자 정의할 함수를 datatipjsfunction Function 지정합니다. 68/104

69 datatipjsfunction 함수의 파라메터는 다음과같습니다. function datatipjsfunction (seriesid:string, code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 datatiptype String 데이터팁타입을지정합니다.(Type01,02,03) Div 데이터팁 ( 툴팁 ) 을사용자정의할함수를 지정합니다. divdatatipjsfunction followdatatip height Function Boolean( 기본값 :false) Number divdatatipjsfunction 함수의파라메터는다음과같습니다. function divdatatipjsfunction (seriesid:string, code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일참조 ) data : dataurl 등에의거해읽어들인데이터중해당지역데이타데이터팁이마우스를따라움직일지설정합니다. 세로사이즈를픽셀또는 % 단위로지정합니다. 시리즈의아이템을클릭시불려질함수를지정합니다. itemclickjsfunction Function itemclickjsfunction 함수의 파라메터는 다음과같습니다. function itemclickjsfunction (seriesid:string, 69/104

70 code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일참조 ) data : dataurl 등에의거해읽어들인데이터중해당지역데이타지역을클릭시불려질함수를지정합니다. mapchangejsfunction Function opencode String percentcenterx Number( 기본값 :0) percentcentery Number( 기본값 :0) rootcode String mapchangejsfunction 함수의파라메터는다음과같습니다. function mapchangejsfunction (code:string, label:string, data:object) code : 지역코드 label : 지역명 (mapdatabaseurl 의파일참조 ) data : dataurl등에의거해읽어들인데이터중해당지역데이타현재사용자가보고있는지역의코드입니다. 하위에지역들이있고 drilldownenabled 이 true 이면해당지역으로이동되며 opencode 에딸린지역이표시됩니다. 초기값은 이며지도에서최상위지역을보여주게됩니다. 퍼센트로표시되는중앙지점의 x 좌표. 0 이면중심을의미하며, 100% 이면맨오른쪽, -100% 이면맨왼쪽으로중심이이동하게됩니다퍼센트로표시되는중앙지점의 y 좌표. 0 이면중심을의미하며, 100% 이면맨아래, -100% 이면맨위로중심이이동하게됩니다맨처음로딩시보여줄지역의코드입니다. 표시되지않으면최상위지역 ( 전국또는세계 ) 이표시됩니다. 70/104

71 지도의스케일모드. scalemode auto, manual (auto) "auto" 의경우화면의크기에따라지도의배율을조정하여표시하고, manual 의경우지정된배율로지도를표시합니다. 선택된지역의코드입니다. selectedcode String 기본값은 null 이며, 아무런선택이없을 경우 null 이지정됩니다. showdatatips Boolean(false) 지역이미지마우스오버시데이타팁을보여줄지여부. stylename String 스타일이름으로스타일지정 visible Boolean(true) 가시화할지여부를나타냅니다. width Number 가로사이즈를픽셀또는 % 단위로지정합니다. 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 datatipalpha Number(0~1) 데이터팁배경투명도 datatipbordercolor RGB 데이터팁선색 datatipcolor RGB 데이터팁폰트색 datatipfill RGB 데이터팁배경색 fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. 함수명및설명. 메소드명 설명 function addeventlistener(type:string, listener:function):void addeventlistener() type에선언된이벤트가발생할경우이벤트를받을수있는 listerner함수를등록합니다. Parameters - type:string 이벤트종류를표현하는문자열 71/104

72 - listener:function 이벤트발생시불려질함수 clearselection() function clearselection():void 현재선택된내역을지웁니다. function getcoderectangle(code:string):rectangle 특정코드의지역의위치와크기를반환합니다. getcoderectangle() Parameters - code:string 지역코드 Returns - Rectangle: 지역의위치와크기를나타내는 Rectangle객체, 없을시 null function getcodecenterposition(code:string, userevisedcenter:boolean = false):point 특정코드의지역의중심위치를반환합니다. getcodecenterposition() Parameters - code:string 지역코드 - userevisedcenter:boolean mapdatabased에설정된중심이동값의적용여부 Returns - Point: 지역의중심위치를나타내는 Point객체, 없을시 null function movecenterto (code:string, userevisedcenter:boolean = false, witheffect:boolean = true):void 특정코드지역으로중심위치를이동합니다.. movecenterto() removeeventlistener() Parameters - code:string 지역코드 - userevisedcenter:boolean mapdatabased에설정된중심이동값의적용여부 - witheffect:boolean 중심이동시이펙트사용여부 function removeeventlistener(type:string, listener:function):void type에선언된이벤트에연결된함수 listener를제거합니다. 72/104

73 Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 설명 사용자가마우스를클릭하면발생합니다. click 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx: X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표 MapSeries 지도를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. areacodefield String 맵데이타에서적용할지역코드필드명 ( 기본값 : code) 73/104

74 enabledfield String 지역이미지의사용자선택가능여부를지정하는 data provider 의필드명 filters Array 시리즈에적용할필터를설정합니다. DropShadowFilter, GlowFilter 가가능하며여러개를동시에적용할수있습니다. goupbuttononly Boolean(false) DrillDown 하위맵에서버튼으로만상위맵으로이동할수있도록지정여부 hideoversizelabel Boolean(true) 라벨의크기가지역이미지보다큰경우라벨을숨길지여부 사용자마우스조작에반응할지여부 interactive Boolean(true) false 일경우마우스롤오버나클릭이 안되며 disabledfill 색상으로표시됩니다. labelcolorfield String 라벨의색상을표현하는데이터필드값 시리즈의 라벨에 적용할 필터를 labelfilters Array 설정합니다. DropShadowFilter, GlowFilter 가가능하며여러개를동시에적용할수있습니다. labelfield String 지역이미지의라벨을지정하는 data provider 의필드명 라벨 ( 지역명 ) 을 사용자 정의할 함수를 지정합니다. labeljsfunction 함수의파라메터는다음과 같습니다. function labeljsfunction (seriesid:string, labeljsfunction Function code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 localfillbyrange Array 최대최소값에맞춰진색상범위값설정 지역색을 사용자 정의할 함수를 localfilljsfunction Function 지정합니다. 74/104

75 localfilljsfunction 함수의 파라메터는 다음과같습니다. function localfilljsfunction (code:string, label:string, data:object) code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 mapcolorfield String 맵의색상을표현하는데이터필드값 지역에표시할패턴을지정합니다. 패턴은 rmatemapcharth5/assets/patters pattern String 폴더에있습니다. 폴더안의이미지명을입력하면됩니다. localfill 을사용하게될경우 localfill 색상으로덮어집니다. rangelegenddatafield String localfillbyrange 의기준값이되는데이터필드값 이미지를클릭할경우해당이미지에 표시하는방식지정. "line", blink, "color", "none" 이가능하며 "line" 의경우에는빗금으로표시하고, selectionmarking line, blink color, none (color) blink 의경우선택된지역이깜빡이며, "color" 의경우스타일의 selectionfill 속성의컬러를표시하며, "none" 의경우에는아무런표시를하지 않습니다. showdataeffect Effect 지역이미지가표시될때적용할이펙트 showlabelfield String 라벨유무를표현하는데이터필드값 ( 데이터는 true/false 로구분 ) 지역외곽선색을사용자정의할함수를 지정합니다. strokejsfunction Function storkejsfunction 함수의 파라메터는 다음과같습니다. 75/104

76 function strokejsfunction (code:string, label:string, data:object) code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 stylename String 스타일이름으로스타일지정 usehandcursor Boolean(false) 마우스오버시손모양커서표시여부 usegis Boolean(false) GIS 데이터사용유무 visible Boolean(true) 가시화할지여부를나타냅니다. 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 blinkinterval Number(400) 선택된 ( 클릭된 ) 지역이미지의깜빡거림시간간격 ( 밀리세컨드 ) color RGB 텍스트의색깔을나타냅니다. datatipbordersize Number 데이터팁선굵기 disabledcolor RGB 잠긴상태의텍스트컬러를나타냅니다. disabledfill RGB 사용자선택불가지역이미지의색상 disabledstroke RGB 사용자선택불가지역이미지의경계라인색상 fontalpha Number 폰트투명도를설정합니다. fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. labelposition none, inside ( 기본값 none) 라벨의위치를설정 none 일경우라벨을표시하지않습니다. localfill RGB 지역이미지기본색상 - 설정하지않을경우 SVG 의색상이사용됩니다. rolloverfill RGB 마우스오버된지역이미지의색상 rolloverfilljsfunction Function 마우스오버시사용자정의맵색상 rolloverfontcolor RGB 마우스오버시폰트색상 rolloverstroke RGB 마우스오버된지역이미지의경계라인색상 selectionfill RGB 선택된 ( 클릭된 ) 지역이미지색상 - selectionmarking 가 color 일경우 76/104

77 selectionstroke RGB 선택된 ( 클릭된 ) 지역경계라인색상 selectionstrokealpha Number 선택된맵의 Stroke 투명도 selectionmarklinecolor RGB 선택된 ( 클릭된 ) 지역이미지라인표시색상 - selectionmarking 가 line 일경우 selectionstrokesize small, large selectionmarking 이 line 인경우선의간격 Stroke RGB 지역이미지경계라인색상 textdecoration underline, none 폰트 underline 지정 tooltipalpha Number 툴팁배경투명도 tooltipbordercolor RGB 툴팁프레임의선색상 tooltipcolor RGB 툴팁글자색상 tooltipfill RGB 툴팁배경색상 transparentvalue Number(0~100) rolloverfill="transparent" 일경우마우스오버시하이라이트를주는속성 함수명및설명. 메소드명 설명 function addeventlistener(type:string, listener:function):void addeventlistener() type에선언된이벤트가발생할경우이벤트를받을수있는 listerner함수를등록합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 function removeeventlistener(type:string, listener:function):void removeeventlistener() type에선언된이벤트에연결된함수 listener를제거합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 설명 click 사용자가마우스를클릭하면발생합니다. 77/104

78 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표 MapBubbleSeries 지도위에원으로값를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 Alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. areacodefield String 맵데이타에서적용할지역코드필드명 ( 기본값 : code) displaydata Boolean(false) 라벨을데이터로표현할것이지여부 원의 색상을 사용자 정의할 함수를 지정합니다. filljsfunction Function filljsfunction 함수의파라메터는다음과같습니다. function filljsfunction (seriresid :String, code:string, label:string, data:object) seriresid : Series 의 id 78/104

79 filters horizontalcentergapfield interactive labelfilters labelfield Array String Boolean(true) Array String code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 시리즈에적용할필터를설정합니다. DropShadowFilter, GlowFilter 가가능하며 여러개를동시에적용할수있습니다. 지점 수평 이동좌표를 지정하는 data provider 의필드명 사용자마우스조작에반응할지여부 false 일경우마우스롤오버나클릭이 안되며 disabledcolor 색상으로표시됩니다. 시리즈의 라벨에 적용할 필터를 설정합니다. DropShadowFilter, GlowFilter 가가능하며 여러개를동시에적용할수있습니다. 지역 이미지의 라벨을 지정하는 data provider 의필드명 라벨 ( 지역명 ) 을 사용자 정의할 함수를 지정합니다. labeljsfunction 함수의파라메터는다음과 같습니다. function labeljsfunction (seriesid:string, labeljsfunction Function code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 maxradius Number(40) 가장큰값일때의최대반경픽셀수 minradius Number(0) 가장작은값일때의최소반경픽셀수 radiusfield String dataprovider 에서지역별값을나타내는필드명 showdataeffect Effect 시리즈가표시될때적용할이펙트 79/104

80 usegis Boolean(false) GIS 데이터사용유무 usehandcursor Boolean(false) 마우스오버시손모양커서표시여부 stylename String 스타일이름으로스타일지정 userevisedcenter Boolean(true) mapdatabased 에설정된중심이동값의적용여부 verticalcentergapfield String 지점수직이동좌표를지정하는 data provider 의필드명 visible Boolean(true) 가시화할지여부를나타냅니다. 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 color RGB 텍스트의색깔을나타냅니다. disabledcolor RGB 잠긴상태의텍스트컬러를나타냅니다. fill RGB 원에표시할색상 fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. itemrenderer String 원을그리는객체 (CircleItemRenderer, BallItemRenderer 이있습니다 ) labelposition none, inside ( 기본값 none) 라벨의위치를설정 none 일경우라벨을표시하지않습니다. stroke RGB 원의경계라인색상 textdecoration underline, none 폰트 underline 지정 Window7 InternetExplorer 11 에서는 underline 이적용되지않는브라우저버그가발생할수있습니다. 함수명및설명. 메소드명 addeventlistener() 설명 function addeventlistener(type:string, listener:function):void type에선언된이벤트가발생할경우이벤트를받을수있는 listerner함수를등록합니다. 80/104

81 Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수예 ) mapapp = document.getelementbyid(" 맵차트ID"); maproot = mapapp.getroot(); map = maproot.getmap(); mapsvg = map.mapsvg; mapsvg.element.getelementbyid(" 시리즈IDBubbleGroup").addEventListener(" 이벤트 ", 이벤트핸들러 ); function removeeventlistener(type:string, listener:function):void removeeventlistener() type에선언된이벤트에연결된함수 listener를제거합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 설명 사용자가마우스를클릭하면발생합니다. click 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 81/104

82 - clienty : Y 좌표 MapImageSeries 지도위에이미지를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. areacodefield String 맵데이타에서적용할지역코드필드명 ( 기본값 : code) horizontalgap Number 전체이미지좌우이동값 horizontalcentergapfield String 지점수평이동좌표를지정하는 data provider 의필드명 imagewidth Number 표시될이미지의넓이 - 지정하지않으면원본이미지크기로표시됩니다 imageheight Number 표시될이미지의높이 - 지정하지않으면원본이미지크기로표시됩니다 imageurlfield String dataprovider 에서지역별이미지 URL 값을나타내는필드명 사용자마우스조작에반응할지여부 interactive Boolean(true) false 일경우마우스롤오버나클릭이 안되며 disabledcolor 색상으로표시됩니다. 시리즈의 라벨에 적용할 필터를 labelfilters Array 설정합니다. DropShadowFilter, GlowFilter 가가능하며여러개를동시에적용할수있습니다. labelfield String 지역이미지의라벨을지정하는 data provider 의필드명 라벨 ( 지역명 ) 을 사용자 정의할 함수를 지정합니다. labeljsfunction Function labeljsfunction 함수의파라메터는다음과 같습니다. 82/104

83 function labeljsfunction (seriesid:string, code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 라벨위치를지정하는 data provider 의 labelpositionfield String 필드명이필드는 top, left, right, bottom, none 중한개의값을가져야합니다. rotatefield String 이미지를회전시킬값의필드를지정합니다. selectedcircle Boolean(true) 선택시원모양으로체크되는표현적용여부 selectedfill RGB 선택시체크되는원의색상을지정합니다. showdataeffect Effect 시리즈가표시될때적용할이펙트 usegis Boolean(false) GIS 데이터사용유무 usehandcursor Boolean(false) 마우스오버시손모양커서표시여부 showimagefield String 이미지유무를표현하는데이터필드값 stylename String 스타일이름으로스타일지정 userevisedcenter Boolean(true) mapdatabased 에설정된중심이동값의적용여부 verticalgap String 전체이미지상하이동값 verticalcentergapfield String 지점수직이동좌표를지정하는 data provider 의필드명 visible Boolean(true) 가시화할지여부를나타냅니다. 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 color RGB 텍스트의색깔을나타냅니다. disabledcolor RGB 잠긴상태의텍스트컬러를나타냅니다. fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. 83/104

84 fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. labelposition none, top, bottom, 라벨의위치를설정 left, right ( 기본값 none) none 일경우라벨을표시하지않습니다. textdecoration underline, none 폰트 underline 지정 tooltipbordercolor RGB 툴팁프레임의선색상 함수명및설명. 메소드명 설명 function addeventlistener(type:string, listener:function):void addeventlistener() type에선언된이벤트가발생할경우이벤트를받을수있는 listerner함수를등록합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수예 ) mapapp = document.getelementbyid(" 맵차트ID"); maproot = mapapp.getroot(); map = maproot.getmap(); mapsvg = map.mapsvg; mapsvg.element.getelementbyid(" 시리즈IDImageGroup").addEventListener(" 이벤트 ", 이벤트핸들러 ); function removeeventlistener(type:string, listener:function):void removeeventlistener() type에선언된이벤트에연결된함수 listener를제거합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 click 설명 사용자가마우스를클릭하면발생합니다. 84/104

85 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표 MapPlotSeries 지도위에포인트를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. areacodefield String 맵데이타에서적용할지역코드필드명 ( 기본값 : code) 포인트 마크의 색상을 사용자 정의할 함수를지정합니다. filljsfunction Function filljsfunction 함수의파라메터는다음과같습니다. function filljsfunction (seriresid :String, code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 85/104

86 filters horizontalcentergapfield interactive labelfilters labelfield Array String Boolean(true) Array String label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 시리즈에적용할필터를설정합니다. DropShadowFilter, GlowFilter 가가능하며 여러개를동시에적용할수있습니다. 지점 수평 이동좌표를 지정하는 data provider 의필드명 사용자마우스조작에반응할지여부 false 일경우마우스롤오버나클릭이 안되며 disabledcolor 색상으로표시됩니다. 시리즈의 라벨에 적용할 필터를 설정합니다. DropShadowFilter, GlowFilter 가가능하며 여러개를동시에적용할수있습니다. 지역 이미지의 라벨을 지정하는 data provider 의필드명 라벨 ( 지역명 ) 을 사용자 정의할 함수를 지정합니다. labeljsfunction 함수의파라메터는다음과 같습니다. function labeljsfunction (seriesid:string, labeljsfunction Function code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 라벨위치를지정하는 data provider 의 labelpositionfield String 필드명이필드는 top, left, right, bottom, none 중한개의값을가져야합니다. showdataeffect Effect 시리즈가표시될때적용할이펙트 usegis Boolean(false) GIS 데이터사용유무 86/104

87 usehandcursor Boolean(false) 마우스오버시손모양커서표시여부 stylename String 스타일이름으로스타일지정 userevisedcenter Boolean(true) mapdatabased 에설정된중심이동값의적용여부 verticalcentergapfield String 지점수직이동좌표를지정하는 data provider 의필드명 visible Boolean(true) 가시화할지여부를나타냅니다. 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 adjustedradius Number(2) 사용자가선택하거나롤오버시지점마크의크기증가픽셀수 color RGB 텍스트의색깔을나타냅니다. disabledcolor RGB 잠긴상태의텍스트컬러를나타냅니다. fill RGB 마크에표시할색상 fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. itemrenderer String 지점마크를그리는객체 (CircleItemRenderer, TriangleItemRenderer, BoxItemRenderer 등등이있습니다 ) labelposition none, top, bottom, 라벨의위치를설정 left, right ( 기본값 none) none 일경우라벨을표시하지않습니다. stroke RGB 마크, 라벨의경계라인색상 textdecoration underline, none 폰트 underline 지정 함수명및설명. 메소드명 설명 function addeventlistener(type:string, listener:function):void addeventlistener() type 에선언된이벤트가발생할경우이벤트를받을수있는 listerner 함수를 등록합니다. Parameters 87/104

88 - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수예 ) mapapp = document.getelementbyid(" 맵차트ID"); maproot = mapapp.getroot(); map = maproot.getmap(); mapsvg = map.mapsvg; mapsvg.element.getelementbyid(" 시리즈IDPlotGroup").addEventListener(" 이벤트 ", 이벤트핸들러 ); function removeeventlistener(type:string, listener:function):void removeeventlistener() type에선언된이벤트에연결된함수 listener를제거합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 설명 사용자가마우스를클릭하면발생합니다. click 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표 88/104

89 14.6. MapPanelSeries 지도위에판넬을표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 Alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. areacodefield String 맵데이타에서적용할지역코드필드명 ( 기본값 : code) bodycolor RGB 판넬의내용의색상을설정합니다. bodytextfield String dataprovider 에서판넬의내용을나타내는필드명 판넬 타이틀의 색상을 사용자 정의할 함수를지정합니다. filljsfunction filters horizontalcentergapfield interactive Function Array String Boolean(true) filljsfunction 함수의파라메터는다음과같습니다. function filljsfunction (seriresid :String, code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일참조 ) data : dataurl 등에의거해읽어들인데이터중해당지역데이타시리즈에적용할필터를설정합니다. DropShadowFilter, GlowFilter 가가능하며여러개를동시에적용할수있습니다. 지점수평이동좌표를지정하는 data provider 의필드명사용자마우스조작에반응할지여부 false 일경우마우스롤오버나클릭이안되며 disabledcolor 색상으로표시됩니다. 89/104

90 panelwidth Number 표시될판넬의넓이 - 지정하지않으면텍스트크기에따라표시됩니다 panelheight Number 표시될판넬의높이 - 지정하지않으면텍스트크기에따라표시됩니다 rolloverfill RGB 마우스오버시패널색상 rolloverfillshadevalue Number(0~100) 마우스오버시패널색상보정값 selectedcircle Boolean(true) 선택시원모양으로체크되는표현적용여부 selectedfill RGB 선택시체크되는원의색상을지정합니다. showdataeffect Effect 시리즈가표시될때적용할이펙트 showheader Boolean(true) 헤더를표시할지여부 showpanelfield String 패널유무를표현하는데이터필드값 stylename String 스타일이름으로스타일지정 titlefield String 판넬타이틀을지정하는 data provider 의필드명 판넬 타이틀을 사용자 정의할 함수를 지정합니다. titlejsfunction 함수의파라메터는다음과 같습니다. function titlejsfunction (seriesid:string, titlejsfunction Function code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 usegis Boolean(false) GIS 데이터사용유무 usehandcursor Boolean(false) 마우스오버시손모양커서표시여부 userevisedcenter Boolean(true) mapdatabased 에설정된중심이동값의적용여부 verticalcentergapfield String 지점수직이동좌표를지정하는 data provider 의필드명 visible Boolean(true) 가시화할지여부를나타냅니다. wordwrap Boolean(false) 판넬바디문자열의자동줄바꿈여부 90/104

91 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 backgroundfill RGB 판넬의배경색상 ( 기본흰색 ) color RGB 텍스트의색깔을나타냅니다. cornerradius Number(4) 판넬의모서리반지름 disabledcolor RGB 잠긴상태의텍스트컬러를나타냅니다. fill RGB 판넬의타이틀에표시할색상 fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. headerheight Number 판넬의헤더고정높이 - itemrederer 를 VPanelItemRenderer 를사용할경우지정할수있습니다. headerwidth Number 판넬의헤더고정넓이 - itemrederer 를 HPanelItemRenderer 를사용할경우지정할수있습니다. horizontalalign center, left, 판넬바디의수평정렬 right ( 기본값 left) 판넬을 그리는 객체 (VPanelItemRenderer, itemrenderer String HPanelItemRenderer, BTPanelItemRenderer, PTPanelItemRenderer, DLPanelItemRenderer, WHTPanelItemRenderer,LAPanelItemRenderer, LBAPanelItemRenderer,SignPanelItemRenderer, BLKPanelItemRenderer 등이있습니다 ) paddingbottom Number( 기본 3) 판넬바디아랫쪽끝과컨텐츠영역아랫쪽사이의픽셀수 paddingtop Number( 기본 3) 판넬바디윗쪽끝과컨텐츠영역윗쪽사이의픽셀수 paddingleft Number( 기본 5) 판넬바디왼쪽끝과컨텐츠영역왼쪽사이의픽셀수 paddingright Number( 기본 5) 판넬바디오른쪽끝과컨텐츠영역오른쪽사이의픽셀수 stroke RGB 판넬테두리, 라벨의경계라인색상 textdecoration underline, none 폰트 underline 지정 titlestylename String 판넬타이틀의스타일명 91/104

92 verticalalign middle, top, bottom ( 기본값 top) 판넬바디의수직정렬 함수명및설명. 메소드명 설명 function addeventlistener(type:string, listener:function):void addeventlistener() type에선언된이벤트가발생할경우이벤트를받을수있는 listerner함수를등록합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수예 ) mapapp = document.getelementbyid(" 맵차트ID"); maproot = mapapp.getroot(); map = maproot.getmap(); mapsvg = map.mapsvg; mapsvg.element.getelementbyid(" 시리즈IDPanelGroup").addEventListener(" 이벤트 ", 이벤트핸들러 ); function removeeventlistener(type:string, listener:function):void removeeventlistener() type에선언된이벤트에연결된함수 listener를제거합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 설명 사용자가마우스를클릭하면발생합니다. click 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) 92/104

93 - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표 MapRouteSeries 지도위에루트 ( 지역별연결선 ) 를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 Alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. curvefield String route 의곡선기울기설정값의필드명 dashed Boolean(false) route 를점선으로표현할지결정합니다. Rouet 의선색상을사용자정의할함수를 지정합니다. filljsfunction 함수의파라메터는다음과 같습니다. function filljsfunction (seriresid :String, filljsfunction Function code:string, label:string, data:object) seriresid : Series 의 id code : 지역코드 label : 지역명 (mapdatabaseurl 의파일 참조 ) data : dataurl 등에의거해읽어들인 데이터중해당지역데이타 filters Array 시리즈에적용할필터를설정합니다. 93/104

94 DropShadowFilter, GlowFilter 가가능하며여러개를동시에적용할수있습니다. fromcodefield String route 시작점코드필드 fromhcentergapfield String route 시작점의수평위치간격필드 fromvcentergapfield String route 시작점의수직위치간격필드 Id String route Series 의아이디 imgmovingspeed Number route 이미지애니메이션속도 imageposition from, to route 이미지의위치 (from, to) imageurlfield String route 이미지의 URL 주소데이터필드 사용자마우스조작에반응할지여부 Interactive Boolean(true) false 일경우마우스롤오버나클릭이 안되며 disabledcolor 색상으로표시됩니다. labelfield String route 에표현할라벨필드 labelhcentergapfield String route 라벨수평위치간격필드 labelvcentergapfield String rouet 라벨수직위치간격필드 linecolor RGB route 라인의색상 lineheight Number 줄바꿈시줄간격값 marker middle, end 화살표삽입위치 (middle, end) rewindrouteimg Boolean(true) route 이미지애니메이션후원위치로돌아갈지에대한설정 rotatefield string route 이미지회전값필드 showdataeffect Effect 시리즈가표시될때적용할이펙트 showlabel Boolean(true) route 라벨표시유무 stopscodefiled String 중간지점에대한데이터필드값 tocodefield String route 끝점코드필드 tohcentergapfield String route 끝점의수평위치간격필드 tovcentergapfield String route 끝점의수직위치간격필드 usegis Boolean(false) GIS 데이터사용유무 usehandcursor Boolean(false) 마우스오버시손모양커서표시여부 userevisedcenter Boolean(true) mapdatabased 에설정된중심이동값의적용여부 visible Boolean(true) 가시화할지여부를나타냅니다. weight Int route 선의굵기 스타일및유효값설명. 스타일명유효값 ( 기본값 ) 설명 94/104

95 color RGB 텍스트의색깔을나타냅니다. fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. 함수명및설명. 메소드명 설명 function addeventlistener(type:string, listener:function):void addeventlistener() type에선언된이벤트가발생할경우이벤트를받을수있는 listerner함수를등록합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수예 ) mapapp = document.getelementbyid(" 맵차트ID"); maproot = mapapp.getroot(); map = maproot.getmap(); mapsvg = map.mapsvg; mapsvg.element.getelementbyid(" 시리즈IDRouteGroup").addEventListener(" 이벤트 ", 이벤트핸들러 ); function removeeventlistener(type:string, listener:function):void removeeventlistener() type에선언된이벤트에연결된함수 listener를제거합니다. Parameters - type:string 이벤트종류를표현하는문자열 - listener:function 이벤트발생시불려질함수 이벤트및설명. 이벤트 click 설명 사용자가마우스를클릭하면발생합니다. 95/104

96 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표사용자가마우스를더블클릭하면발생합니다. dblclick 이벤트상세내역 - altkey : alter 키클릭여부 - controlkey : 컨트롤키클릭여부 - ctrlkey : 컨트롤키클릭여부 (Mac일경우 ) - shiftkey : Shift 키클릭여부 - clientx : X 좌표 - clienty : Y 좌표 MapSparkSeries 지도위에 Spark Chart 를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 columnwidthratio Number(0.8) 한컬럼이그려질영역의비율을설정하기 defaultcolors rmatespark.defualtcolors 기본색상 firstvaluefill RGB 처음값색상설정하기 horizontalaxisinvert Boolean(false) X 축반대로출력하기 lastvaluefill RGB 마지막값채우기설정하기 maxvaluefill RGB 높은값색상설정하기 (showmaxvalue 가적용된상태에서적용됩니다 ) minusvaluefill RGB 음수값채우기설정하기 (showminusvalue 가적용된상태에서적용됩니다 ) minvaluefill RGB 최소값채우기설정하기 (showminvalue 가적용된상태에서적용됩니다 ) showfirstvalue Boolean(false) 첫번째아이템렌더러표현 showlastvalue Boolean(false) 마지막값아이템렌더러표현 96/104

97 showmaxvalue Boolean(false) 높은값아이템렌더러표현 showminusvalue Boolean(false) 음수값아이템렌더러표현 showminvalue Boolean(false) 낮은값아이템렌더러표현 showdatatips Boolean(false) 툴팁의표현유무설정 startangle Int(0) 파이차트가시작될각도 sparkdatatipborder RGB 툴팁선색상 type String column, pie usegis Boolean(false) GIS 데이터사용유무 스타일및유효값설명. 스타일명 유효값 ( 기본값 ) 설명 color RGB 텍스트의색깔을나타냅니다. fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. labelposition none, inside 라벨의유무설정 ( 기본값 none) none 일경우라벨을표시하지않습니다. textdecoration underline, none 폰트 underline 지정 MapDivSeries 지도위에 Div Element 를표시하는컴포넌트입니다. 속성및유효값설명 속성명 유효값 ( 기본값 ) 설명 id String MapDivSeries 의 ID 값 mdivwidth Number(30) MapDivSeries 의 width 값 mdivheight Number(30) MapDivSeries 의 height 값 customseriesfunction String MapDivSeries 에설정될 HTML Element 를반환할함수명 horizontalcentergapfield String 수평이동좌표를지정하는 data provider 의필드명 97/104

98 verticalcentergapfield String 수직이동좌표를지정하는 data provider 의필드명 Legend 시리즈연동범례를표시하는컴포넌트입니다. 속성및유효값설명. 속성명 유효값 ( 기본값 ) 설명 direction Horizontal vertical(vertical) 범례아이템들의표시방향 backgroundcolor RGB 배경색을나타냅니다. borderstyle none, solid, inset, outset 테두리선의모양을지정합니다. (inset) color RGB 텍스트의색깔을나타냅니다. fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. horizontalgap Number 범례아이템간의수평간격 labelplacement right left top bottom(right) 범례아이템에서마커에대한라벨의위치 markerheight Number 엘리먼트의높이 markerwidth Number 엘리먼트의폭 paddingbottom Number 아래쪽여백을나타냅니다. paddingtop Number 위쪽여백을나타냅니다. paddingleft Number 왼쪽여백을나타냅니다. paddingright Number 오른쪽여백을나타냅니다. usegis Boolean(false) GIS 데이터사용유무 usevisiblecheck Boolean(false) 범례옆에체크박스를표시여부 verticalgap Number 범례아이템간의수직간격 LegendItem 범례아이템을표시하는컴포넌트입니다. 속성및유효값설명. 98/104

99 속성명 유효값 ( 기본값 ) 설명 label String 표시할라벨 fill IFill 엘리먼트에표시할색 SolidColor 객체를넣어줍니다. color RGB 텍스트의색깔을나타냅니다 SubLegend 사용자정의범례를표시하는컴포넌트입니다. 속성및유효값설명. 속성명 유효값 ( 기본값 ) 설명 direction Horizontal vertical(vertical) 범례아이템들의표시방향 backgroundcolor RGB 배경색을나타냅니다. borderstyle none, solid, inset, outset 테두리선의모양을지정합니다. (inset) color RGB 텍스트의색깔을나타냅니다. fontfamily 폰트이름 사용할폰트를결정합니다. fontsize Number( 픽셀단위 ) 폰트사이즈를픽셀단위로결정합니다. fontstyle normal, italic 폰트이텔렉체를사용할지를나타냅니다. fontweight normal, bold 폰트볼드체를사용할지를나타냅니다. horizontalgap Number 범례아이템간의수평간격 labelplacement right left top bottom(right) 범례아이템에서마커에대한라벨의위치 markerheight Number 엘리먼트의높이 markerwidth Number 엘리먼트의폭 paddingbottom Number 아래쪽여백을나타냅니다. paddingtop Number 위쪽여백을나타냅니다. paddingleft Number 왼쪽여백을나타냅니다. paddingright Number 오른쪽여백을나타냅니다. verticalgap Number 범례아이템간의수직간격 DataRangeLegend 데이터레인지형태의범례를표시하는컴포넌트입니다. 속성및유효값설명. 99/104

100 속성명 유효값 ( 기본값 ) 설명 arrowcolor RGB 화살표색 arrowoffset Number 화살표위치 arrowstroke RGB 화살표선색 Colors Array range 색상 datarangeheight Number range 높이 fontsize Number 폰트크기 Height Number 세로크기 Interval Number range 값간격 Maximum Number 최대값설정 Minimum Number 최소값설정 showarrow Boolean 화살표표시유무 Stroke RGB 선색 tickgap Number 틱위치조정값 Width Number 가로크기 SolidColor 단일색상을표현하는컴포넌트입니다. 속성및유효값설명. 속성명유효값 ( 기본값 ) 설명 alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. color RGB 색깔을나타냅니다 LinearGradient 선형으로여러색을표현하는컴포넌트입니다. 속성및유효값설명. 속성명유효값 ( 기본값 ) 설명 angle Number 색의진행각도 100/104

101 RadialGradient 원형으로여러색을표현하는컴포넌트입니다. 속성및유효값설명. 속성명유효값 ( 기본값 ) 설명 angle Number 색의진행각도 focalpointratio Number -1.0 에서 1.0 까지의원중심위치 GradientEntry LinearGradient, RadialGradient 의개별색상을표현하는컴포넌트입니다. 속성및유효값설명. 속성명 유효값 ( 기본값 ) 설명 alpha Number(0~1)( 기본값 :1) 투명도 (alpha) 값을결정합니다. color RGB 색깔을나타냅니다. ratio Number 0.0에서 1.0까지일때색상의시작위치 MapNavigator 맵차트에맵네비게이터를표시를하는컴포넌트입니다. 속성및유효값설명. 속성명유효값 ( 기본값 ) 설명 shownavigatecontrols Boolean(true) 맵이동컨트롤표시여부 showzoomcontrols Boolean(true) 축소, 확대컨트롤표시여부 15. rmate MapChart for HTML5 의기타유의사항설명 101/104

102 15.1. HMTL5 맵차트에서지원하지않는기능 rmatemapchart for HTML5 에서지원되지않는기능은다음과같습니다. 사용자정의함수 (DatatipFunction 등 ) 에서의 HTML Tag, 개행처리사용 : SVG Text 에서 HTML Tag 가지원되지않아기본 Tag 와개행처리가사용이되지않습니다. 모바일브라우저에서맵의 depth 가존재할경우 1 차 depth 에서의 Datatip 표현 : 맵의하위맵이존재할경우터치이벤트동시에하위맵으로이동하기때문에상위맵에대한 Datatip 이표현이되지않습니다. 모바일브라우저에서 MapCrossHair( 십자선 ) 기능 : SVG 에서 touchmove 이벤트가연동되지않기때문에십자선기능이정상적으로동작하지않습니다. 이외에 IE9, Safari, Android 기본브라우저에서는 Filter 를지원하지않아 DropShadow 기능이나 GlowFilter 가표현되지않습니다 HTML5 맵차트의리사이즈 HTML5 맵차트에서는맵차트의크기가고정되어있습니다. 처음그려지는맵차트부모의 Div 크기와그부모의 Div 크기안에서맵차트의크기만큼맵차트를출력하게됩니다. 브라우저창을늘이고줄였을경우맵차트의크기도줄어들어야한다면우선 CSS 에서 html 과 body 의 height 크기를 100% 로잡아주셔야합니다. 그리고맵차트의부모 Div 즉 rmatemapcharth5.create(, 부모 Div Id,. ); 에서의부모 Div 의크기 width, height 를퍼센티지값으로설정하여주시고맵차트의크기또한퍼센티지값으로설정하여주십시오. html{ } height:100%; body{ } height:100%; // rmatemapchart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 맵차트의 id ( 임의로지정하십시오. ) // 2. 맵차트가위치할 div 의 id ( 즉, 맵차트의부모 div 의 id 입니다.) // 3. 맵차트생성시필요한환경변수들의묶음인 mapvars 102/104

103 // 4. 맵차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 맵차트의세로사이즈 ( 생략가능, 생략시 100%) rmatemapcharth5.create("map1", "mapholder", mapvars, "100%", "100%");  <div id="mapholder" style="width:100%; height:100%;"> </div> 위와같이사용하여주시기바랍니다. 위의경우에는 mapholder 라는 Div 하나밖에없지만이 Div 를감싸고있는부모 Div 가있다면감싸고있는 Div 의크기도퍼센티지값으로적용하셔야합니다. 그리고위와같이브라우저창을늘이고줄일경우가아닌임의적으로버튼클릭등의이벤트를받아맵차트의크기를변경하고싶으실경우에는해당맵차트의부모 Div 의크기를변경후리사이징함수를실행하시어맵차트크기를변경하여사용하시기바랍니다. 아래는예제입니다. function changechart(w,h){ var ch = document.getelementbyid("mapholder") // 맵차트의부모 Div를가져온다. ch.style.width = w+"px"; // width를 600px로변경 ch.style.height = h+"px"; // height를 400px로변경 document.getelementbyid("map1").resize(); // 부모Div 크기변경후 id가 map1 인맵차트를리사이징시킨다. } 위처럼 map1 에접근하여 resize 함수를실행하면되겠습니다. document.getelementbyid("map1").resize(); 브라우저창을늘이고줄이는것이아닌이상해당맵차트를리사이즈시키려면위처럼리사이즈를 하려하는맵차트 id 에접근하여 resize() 함수를실행하십시오 기타 HTML5 맵차트의데스크탑 / 모바일브라우저및기기에따른유의사항 HTML5 맵차트는데스크탑및모바일의브라우저및기기성능에따라약간씩표현이다를수있습니다. 앞서 15.1 HMTL5 맵차트에서지원하지않는기능 에서언급된사항외에아래의추가적인내용을 유의바랍니다. 모바일브라우저에서이펙트사용시기기성능에따라모션끊김이발생할수있습니다. 103/104

104 데스크탑의파이어폭스, 사파리, 크롬의경우이펙트사용시모션끊김이발생할수있습니다. 안드로이드브라우저와사파리에서는 Filter 효과 (Shadow, Glow) 가표현되지않습니다. SVG 파일의저작권 rmate MapChart 에서제공되는 Svg 파일들은 리아모어의소유이므로허가받은사항외에무단사용, 복제 및배포를금지합니다. 104/104

모두 보기

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법