RiaMore Soft - Koolchart · 2016-06-15 · 9.0+ 3.0+ 3.0+ 4.0+ 3.2+ IOS7+ 3.0+ 1.3. KoolMap System Configuration < Figure 1 Data Transmission between Server and Client > Layout,

KoolMap for HTML5

USER’S GUIDE

Version 3.0

RiaMore Soft

2/119

Contents

1. Overview ................................................................................................................................................................................................ 5

1.1. About KoolMap for HTML5 ........................................................................................................................................... 5

1.2. System Requirements ....................................................................................................................................................... 5

1.3. KoolMap System Configuration .................................................................................................................................. 5

2. Creating a Map Chart ...................................................................................................................................................................... 6

2.1. Registering KoolMap License Key .............................................................................................................................. 6

2.2. Creating Map Chart using Samples........................................................................................................................... 7

3. Data used in Map Chart ............................................................................................................................................................... 10

3.1. SVG Map .............................................................................................................................................................................. 10

3.2. Mapdatabase ...................................................................................................................................................................... 11

3.3. Dataset .................................................................................................................................................................................. 11

4. Using Layout ...................................................................................................................................................................................... 11

4.1. About Layout ...................................................................................................................................................................... 11

4.2. Creating Layout ................................................................................................................................................................. 12

4.3. Setting <KoolMap> in Layouts ................................................................................................................................. 13

4.4. Setting Styles (CSS) in Layout .................................................................................................................................... 14

5. Configuring and Interfacing Map Chart ................................................................................................................................ 16

5.1. Setting mapVars ............................................................................................................................................................... 16

5.2. Interface Functions .......................................................................................................................................................... 17

6. Series ..................................................................................................................................................................................................... 18

6.1. MapSeries ............................................................................................................................................................................ 18

6.2. MapBubbleSeries .............................................................................................................................................................. 19

6.3. MapImageSeries ............................................................................................................................................................... 21

6.4. MapPanelSeries ................................................................................................................................................................. 22

6.5. MapPlotSeries .................................................................................................................................................................... 24

6.6. MapRouteSeries ................................................................................................................................................................ 26

6.7. MapSparkSeries ................................................................................................................................................................. 27

6.8. MapDivSeries ...................................................................................................................................................................... 29

7. Color ...................................................................................................................................................................................................... 31

7.1. Single Color ........................................................................................................................................................................ 31

7.2. Linear Gradation ............................................................................................................................................................... 32

7.3. Radial Gradient .................................................................................................................................................................. 32

7.4. Stroke ..................................................................................................................................................................................... 33

7.5. Shadow.................................................................................................................................................................................. 33

8. OnClick Function Call ..................................................................................................................................................................... 34

3/119

8.1. Region Click ........................................................................................................................................................................ 34

8.2. Item Click ............................................................................................................................................................................. 38

8.3. Parent Map, Outside Map ............................................................................................................................................ 43

9. User-defined Function ................................................................................................................................................................... 47

9.1. Tooltips ................................................................................................................................................................................. 47

9.2. Label ....................................................................................................................................................................................... 50

9.3. Title ......................................................................................................................................................................................... 52

9.4. Color ....................................................................................................................................................................................... 54

9.5. Item Color ............................................................................................................................................................................ 56

9.6. User-defined Color for the Border of the Region ............................................................................................ 58

10. Legend .................................................................................................................................................................................................. 60

11. Advanced Features .......................................................................................................................................................................... 64

11.1. Effect ...................................................................................................................................................................................... 64

11.2. Zooming and Showing Crosshairs ........................................................................................................................... 65

11.3. Map Navigator .................................................................................................................................................................. 65

12. Creating and Editing SVG Map ................................................................................................................................................. 66

12.1. SVG ......................................................................................................................................................................................... 66

13. Attributes, Styles, Functions and Events for Component ............................................................................................. 67

13.1. MapChart ............................................................................................................................................................................. 67

13.2. MapSeries ............................................................................................................................................................................ 75

13.3. MapBubbleSeries .............................................................................................................................................................. 81

13.4. MapImageSeries ............................................................................................................................................................... 85

13.5. MapPlotSeries .................................................................................................................................................................... 90

13.6. MapPanelSeries ................................................................................................................................................................. 95

13.7. MapRouteSeries ............................................................................................................................................................. 100

13.8. MapSparkSeries .............................................................................................................................................................. 105

13.9. MapDivSeries ................................................................................................................................................................... 109

13.10. Legend........................................................................................................................................................................... 112

13.11. LegendItem ................................................................................................................................................................. 113

13.12. SubLegend ................................................................................................................................................................... 113

13.13. SolidColor .................................................................................................................................................................... 114

13.14. LinearGradient ........................................................................................................................................................... 114

13.15. RadialGradient ........................................................................................................................................................... 115

13.16. GradientEntry ............................................................................................................................................................. 115

13.17. MapCrossHair ............................................................................................................................................................. 115

13.18. MapNavigator ............................................................................................................................................................ 116

14. Notice of Implementing KoolMap ........................................................................................................................................ 117

14.1. Not Supported Functions .......................................................................................................................................... 117

4/119

14.2. Chart Resizing ................................................................................................................................................................. 117

14.3. Using Desktop / Mobile ............................................................................................................................................. 119

5/119

1. Overview

1.1. About KoolMap for HTML5

KoolMap is a tool that displays an interactive SVG map with showing the location-related data on the

web using JavaScript / HTML5 technology. KoolMap is a browser and platform independent solution,

which can be used with ASP.NET, JSP, PHP, ASP, ColdFusion and simple HTML page. Please visit our

website at http://www.koolchart.com and find the KoolMap demo that shows the powerful features of

KoolMap with ease of integration.

1.2. System Requirements

Server -- No restrictions.

Client – SVG supported browsers.

IE Firefox Safari Chrome iPhone iPad Android

9.0+ 3.0+ 3.0+ 4.0+ 3.2+ IOS7+ 3.0+

1.3. KoolMap System Configuration

< Figure 1 Data Transmission between Server and Client >

Layout, Dataset, Mapdatabase and the SVG map are required to create a map chart using KoolMap. The

format of Layout is XML, and it has detailed information of the map chart, such as whether or not the

chart can have the sub-map, the color of each region on the map, interface with JavaScript, etc. Dataset

Creating Layout and

Data Transmission (HTTP)

Client Server

http://www.koolchart.com/

6/119

contains the information to be displayed on the map, and Mapdatabase and the SVG map are used to

depict the map.

The data interface in KoolMap can be one of the following forms.

The URL of the XML-formatted data

The URL of the Array-formatted data

Passing the XML-formatted string as a JavaScript parameter

Passing the Array-formatted string as a JavaScript parameter

Creating the Array object using JavaScript

2. Creating a Map Chart

2.1. Registering KoolMap License Key

Once you have obtained the appropriate license key, you must register it before you use KoolMap for

HTML5. The license file is in the following path of the product.

/LicenseKey/KoolMapLicense.js

All you have to do for applying the license key is to include KoolMapLicense.js in the head section of

your HTML document

<html>

<head>

…

…

…



<script src="KoolMapLicense.js" language="javascript"></script>



<script language="JavaScript" type="text/javascript">

…

…

…

< Example 1 Registering the License Key for KoolMap >

7/119

2.2. Creating Map Chart using Samples

Copy the following files to your working directory to create a map chart.

Data File: Samples/Data/route.txt

Layout File: Samples/LayoutXml/LayoutMapRouteSeries.xml

Mapdatabase File: Samples/MapDataBaseXml/WorldCountry.xml

Map Svg File: MapSource/WorldCountry.svg

KoolMap JS Library: KoolMap/JS/KoolMap.js

License File: /LicenseKey/KoolMapLicense.js

Link the above files to the HTML file as below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<meta http-equiv="Content-Style-Type" content="text/css"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>



<link rel="stylesheet" type="text/css" href="./KoolMapSample.css"/>



<script language="javascript" type="text/javascript"

src="./LicenseKey/KoolMapLicense.js"></script>




src="../KoolMap/JS/KoolMap.js"></script>

<script type="text/javascript">

// Sets the value of KoolOnLoadCallFunction to the name of the JS function,

chartReadyHandler, which is called when the chart is ready to be created.

var mapVars = "KoolOnLoadCallFunction=chartReadyHandler";

// Creates the map chart.

// Parameters:

// 1. Chart ID: You can use any name you like.

// 2. DIV ID: The chart will be placed in this DIV.

// 3. mapVars: Variables used for creating the chart.

// 4. Chart width: Default value is 100%

// 5. Chart height: Default value is 100%

KoolMap.create("map1", "mapHolder", mapVars, "100%", "100%");

8/119

// The JavaScript function which is set to the value of KoolOnLoadCallFunction.

// Parameter - ID: The chart ID which is used as the first parameter of

KoolMap.create()

// There are 7 callback functions in KoolMap.

// 1. setLayout – It sets the string type Layout

// 2. setData – It sets the array type Dataset

// 3. setMapDataBase – It sets the string type Mapdatabase

// 4. setLayoutURLEx – It sets the URL of Layout

// 5. setDataURLEx – It sets the URL of Dataset

// 6. setMapDataBaseURLEx - It sets the URL of Mapdatabase

// 7. setSourceURLEx – It sets the URL of the SVG map

function chartReadyHandler(id) {

document.getElementById(id).setLayoutURLEx(layoutURL);

document.getElementById(id).setDataURLEx(dataURL);

document.getElementById(id).setMapDataBaseURLEx(mapDataBaseURL);

document.getElementById(id).setSourceURLEx(sourceURL);

}

// The URL of Layout (XML-formatted file). It must be defined.

var layoutURL = "./LayoutXml/LayoutMapRouteSeries.xml";

// The URL of Dataset (XML-formatted file). If you define the Array-formatted

Dataset with JavaScript, then comment out this line.

var dataURL = "./Data/route.txt";

// The URL of Mapdatabase. If you define the map data using the function,

setMapDataBase(), then comment out this line.

var mapDataBaseURL = "./MapDataBaseXml/WorldCountry.xml";

// The URL of the SVG map. You can use the SVG maps provided in the product or

your own SVG maps

var sourceURL = "./MapSource/WorldCountry.svg";

<!—The end of the user configuration -->

</script>

</head>

<body>

<div class="content">



<div id="mapHolder" style="width:700px; ">

</div>

</div>

</body>

</html>

< Example 2 Creating a Map Chart in the Web page >

When you run the above HTML file, you will see the following map in the web page.

9/119

< Figure 2 The Map Chart created in the Web page >

The following list contains more detailed descriptions of the sample HTML document.

1. Set the doctype of your HTML file. (You can use other doctype)

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

2. Include KoolMap.js and KoolMapLicense.js.


src="../LicenseKey/KoolMapLicense.js"></script>

<script language="javascript" type="text/javascript" src="../KoolMap/JS/KoolMap.js"></script>

3. Include the KoolMap CSS file (KoolMap.css) if you need it.

<link rel="stylesheet" type="text/css" href="../KoolMap/Assets/KoolMap.css"/>

4. Create the DIV in which the chart is created.

<div id="mapHolder" style="width:700px;"></div>

5. Create Layout, Dataset and Mapdatabase.

10/119

6. Call the KoolMap.create() function.

// Creates the map chart

// Parameters :







3. Data used in Map Chart

Dataset, Mapdatabase and the SVG map are 3 required data components in KoolMap. Mapdatabase

supports two data formats: XML and Array. Users need to make the data components with following the

rules that KoolMap enforces.

3.1. SVG Map

The SVG map is the map object containing the regions used in KoolMap. The maps for the following

regions and countries are provided with the current version of KoolMap, and the SVG map files are

located in the MapSource directory. The directory and the file name must be set to the value of

sourceURL.

World

Canada

China

Korea

UK

U.S.

If you want to make maps not provided in KoolMap or edit existing maps, then please refer to

―12.Creating and Editing SVG Map‖.

11/119

3.2. Mapdatabase

Mapdatabase is an XML-formatted data used with the SVG map to represent the information of the

regions in the map. The information represented by Mapdatabase are the region code, the region name

(label), the name of the symbol in the SVG map, the values (horizontalCenterGap, verticalCenterGap)

adjusting the center of the region and the option for enabling the user selection.

The Mapdatabase provided in KoolMap are located in the MapDataBaseXml directory, and the file names

of Mapdatabase are same to the file names of the SVG map with the file extension name .xml.

All the names except the symbol name can be changed by chart developers. ( If you want to use the SVG

map not provided in KoolMap, then you need to use the symbol name which is same as the region name

of the SVG map. )

The region code can be named or changed by your preference, but the thing you must keep in mind is

that the code must be same as the region code of Mapdatabase. The unmatched data will not be

represented in the chart.

3.3. Dataset

Dataset is a User data used to set the color of the region or to interface with data when the user clicks

on the chart, and you don’t have to create Dataset if you don’t want to use it. The supported formats of

Dataset are XML and JSON.

You must keep in mind that the region code of Dataset must be same as the code set to the value of the

areaCodeField property in the chart, and the code also must be same as the code in Mapdatabase.

※ If the data format is JSON, then the statement below must be included in mapVars. ( If the

statement is not included, then the data format will be recognized as XML and an error will occur. )

mapVars += "&dataType=json";

4. Using Layout

4.1. About Layout

KoolMap generates the map chart by parsing the layout created in an XML format. When the user-

created layout is finished being parsed, KoolMap creates the map chart using the KoolMap classes and

represents the data in the chart. The following diagram shows how KoolMap works.

12/119

< Figure 3 KoolMap Working Diagram >

4.2. Creating Layout

The layout of KoolMap begins with <KoolMap> and ends with </KoolMap>, and it comprises of 3 parts,

those are the map UI, map and Styles. The map UI and Styles are optional parts.

The format of the KoolMap layout is XML.

KoolMap supports accessing objects by unique ID. For example, the LegendItem object has the fill

property which can have a SolidColor instance as below:

<KoolMap>

<MapChart …/>

.

.

.

<Legend direction="horizontal" borderStyle="solid" borderColor="#999999"

backgroundColor="#FFFFFF">

<LegendItem label="Less than 30">

<fill>

<SolidColor color="#FF0000"/>

</fill>

</LegendItem>

</Legend>

</KoolMap>

<Example 3 General Method to Set an Iinstance to Property >

For user’s convenience, KoolMap provides the method to set an instance to the property value by

referencing the ID of the predefined object as <Example 4 Referencing Object by ID with curly brackets>.

This method can be an efficient way of setting when multiple objects need to access a single instance of

object because you don’t have to define the same object redundantly.

<KoolMap>

<SolidColor id="color" color="#FF0000"/>

KoolMap Root

KoolMap

JavaScript Library

Layout

Dataset

Mapdata

SVG Map

13/119

<MapChart …/>

.

.

.

<Legend direction="horizontal" borderStyle="solid" borderColor="#999999"

backgroundColor="#FFFFFF">

// The object can be referenced by ID with curly brackets

<LegendItem label="Less than 30 " fill="{color}">

</Legend>

</KoolMap>

< Example 4 Referencing Object by ID with curly brackets>

The two terminologies, MapChart and Series, will be used frequently in this document. The following table

describes key concepts of MapChart and Series.

Descriptions Remarks

MapChart

It represents the visual part of the chart, such as

background, size, etc. The most important role of

MapChart is to contain the series and to interface

with the user.

MapChart

Series

It represents the actual data. The map chart must

have at least one MapSeries, and you can add

additional series you need.

MapSeries, MapBubbleSeries,

MapImageSeries,

MapPanelSeries,

MapPlotSeries

< Table 1 MapChart and Series >

4.3. Setting <KoolMap> in Layouts

<KoolMap> and </KoolMap> indicate the start and end of the layout. The main role of <KoolMap> is to

specify the overall design of the chart by setting the attributes such as borderStyle, backgroundColor, etc.

Attribute Value Description

backgroundColor RGB ( default value : #FFFFFF ) The background color of the chart

backgroundAlpha 0.0 ~ 1.0 (default value : 1.0 ) The background transparency of

the chart

borderStyle none | solid | inset | outset

( default value : none ) The border color of the chart

borderColor RGB ( default value : #B7BABC ) The border color of the chart

borderThickness Number ( default value : 1 ) The border thickness of the chart

cornerRadius Number ( default value : 0 ) The corner roundness of the chart

horizontalAlign ―left‖,‖right‖,‖center‖(기본값:center) The horizontal alignment

14/119

horizontalGap Number ( default value : 8 ) The horizontal gap between

objects

paddingTop Number ( default value : 0 ) The top margin

paddingBottom Number ( default value : 0 ) The bottom margin

paddingLeft Number ( default value : 0 ) The left margin

paddingRight Number ( default value : 0 ) The right margin

verticalAlign ―top‖,‖bottom‖,‖middle‖

( default value : middle ) The vertical alignment

verticalGap Number ( default value : 6 ) The vertical gap between objects

< Table 2 Attributes of < KoolMap > >

The example below shows how to set the attribute of <KoolMap>.

<KoolMap cornerRadius="12" borderStyle="solid" backgroundColor="#FFFF77">

<MapChart>

......

</KoolMap>

<Example 5 Setting the Property of <KoolMap> >

The attributes of <KoolMap> are used to decorate the background of the map chart, so you don’t have

to change the attributes whenever you create a chart.

4.4. Setting Styles (CSS) in Layout

<Style> is used to define the styles of the chart, the way of which is same as the CSS in HTML , and you

need to follow the rules below when you create <Style> in the chart.

1. You must define <Style> as a first-level descendant of <KoolMap>.

2. The style name begins with a dot (.) followed by the character string that begins with a lowercase

first character.

3. The properties of the style must be enclosed in the curly braces ({}).

4. The colon (:) must be placed between the attribute name and the attribute value as a separator and

the attribute definition ends with the semicolon (;).

The following table shows the correct and incorrect examples.

Correct example Incorrect example

<KoolMap>

<MapChart>

<KoolMap>

<MapChart>

15/119

...

<Style>

.KoolMapStyle

{

backgroundColor:#FFFFFE;

borderColor:#77EE9E;

borderThickness:3;

borderStyle:solid;

}

<Style>

</KoolMap>

...

<Style>

MapChartStyle

[


borderColor:”#77EE9E”;

borderThickness:3;

borderStyle:’solid’;

]

<Style>

</KoolMap>

< Table 3 Correct and Incorrect representations of <Style> >

Once you create the style (KoolMapStyle) as above, you can apply the style as follows:

<KoolMap styleName="KoolMapStyle">

<MapChart>

......

<Style>

.KoolMapStyle

{


borderColor:#77EE9E;

cornerRadius:12;

borderThickness:3;

borderStyle:solid;

}

<Style>

</KoolMap>

< Example 6 How to Apply Styles 1 >

In the above example, KoolMapStyle is defined as a first-level descendant of <KoolMap>. To apply the

style to an element in the chart, you need to set the value of the styleName attribute of the element as

follows:

styleName=‖the style name you defined‖. e.g. styleName=‖KoolMapStyle‖

The usage example of the style is as follows:

<KoolMap>

<MapChart id="map1" styleName="mapStyle">

</MapChart>

<Style>

.mapStyle {

color:#FF0000;

fontWeight:bold;

textDecoration:underline;

fontSize:12;

16/119

}

</Style>

</KoolMap>

< Example 7 How to Apply Styles 2 >

5. Configuring and Interfacing Map Chart

The variable, mapVars is used to interface web browsers with the map chart created by KoolMap. This

chapter will describe how to use the variable, mapVars and other basic variables.

5.1. Setting mapVars

mapVars is used to set layout and dataset for creating a map chart. This variable is passed to KoolMap as

a parameter from your JavaScript.

The rules of setting the variable, mapVars are as follow:

The type of mapVars is string.

The separator, &, is used to assign more than 2 variables to mapVars. For example, setting the

SVG map, Mapdatabase (XML), Dataset and Layout is as follows:

var layoutURL = "./Layout.xml";

var mapVars = "layoutURL="+layoutURL;

var dataURL = "./singleData.xml‖;

mapVars += "&dataURL="+dataURL;

var mapDataBaseURL = "./MapDataBaseXml/USADrillDown.xml";

mapVars += "&mapDataBaseURL="+mapDataBaseURL;

var sourceURL = "./MapSource/USADrillDown.svg";

mapVars += "&sourceURL="+sourceURL;

<Example 8 Usage Example: mapVars >

The following table shows the attributes that can be set by using mapVars.


layoutURL URL The URL of Layout

dataURL URL The URL of Dataset

mapDataBaseURL URL The URL of Mapdatabase (XML)

17/119

sourceURL URL The URL of the SVG map

KoolOnLoadCallFunction JavaScript function

name

This function is called when KoolMap is

ready to be created ( executed only one

time ).

Once you set mapVars as above, you must pass mapVars to the KoolMap.create() function as a parameter

as follows:

KoolMap.create("map1", ‖mapHolder", mapVars, 500, 500, ―auto‖);

The parameters of the KoolMap.create() function are as follow:

1. ID : The ID of the map chart ( You can use any name you like )

2. DIV ID : The map chart will be placed in this DIV

3. mapVars: The variables used for creating the map chart.

4. Chart width : pixel or %

5. Chart height : pixel or %

5.2. Interface Functions

KoolMap provides you with the following functions. You can use these functions to interface with

KoolMap.

1. setDataURLEx(value) : It sets the URL of XML-formatted Dataset.

2. setLayoutURLEx (value): It sets the URL of XML-formatted Layout.

3. setMapDataBaseURLEx (value): It sets the URL of XML-formatted Mapdatabase.

4. setSourceURLEx (value): It sets the URL of the SVG map.

5. setData (value): It sets the value of Array-formatted Dataset (or XML-formatted Dataset).

6. setLayout (value): It sets the string type of Layout.

7. setMapDataBase (value): It sets the XML-formatted string of Mapdatabase.

8. setRootCode(value): It sets the rootCode of the map chart.

9. setOpenCode(value): It sets the openCode of the map chart.

10. setSelectedCode(value): It sets the selectedCode of the map chart.

11. resize(): It resizes the map chart.

18/119

6. Series

<KoolMap> comprises of one <MapChart> and multiple <series>. This chapter will describe the types of

<series>. Multiple same types of <series> can be defined, but <MapSeries> can be defined only once in

<KoolMap>.

6.1. MapSeries

MapSeries represents regions in the map chart with the map SVG and Mapdatabase, and only one

MapSeries can exist in the map chart. MapSeries must be defined first within <series>, otherwise other

series defined before MapSeries can be overwritten by MapSeries.

The definition of MapSeries starts with <MapSeries> and ends with </MapSeries>. Please refer to

―13.Attributes, Styles, Functions and Events for Component‖ for the details.

The following layout is an example for MapSeries.

<KoolMap>

<MapChart id="mainMap1" showDataTips="true">

<series>

<MapSeries id="mapseries" interactive="true" selectionMarking="line" color="#555555"

labelPosition="inside" displayName="Map" hideOverSizeLabel="false">

<filters>

<DropShadowFilter distance="1" angle="45" color="#888888"/>

</filters>

<showDataEffect>

<SeriesInterpolate duration="1000"/>

</showDataEffect>

<stroke>

<Stroke color="#FFFFFF" weight="0.8" alpha="1"/>

</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

<Example 9 Layout for MapSerie> >

19/119

<Figure 4 Output: MapSeries >

6.2. MapBubbleSeries

MapBubbleSeries represents numeric values by the size of the circle so that users can easily find the

difference of the regions. The field name for numeric values must be set to the value of the radiusField

attribute, and the maximum and minimum sizes of the circle are set in the maxRadius and minRadius

attributes.

If the value of the useRevisedCenter attribute is ―false‖, then the center of the circle will be the center of

the region; otherwise if the value is ―true‖, then the center of the circle will be defined in Mapdatabase.

The horizontalCenterGapField and verticalCenterGapField attributes are used to set the offsets of the

center point.

The definition of MapBubbleSeries starts with <MapBubbleSeries> and ends with </MapBubbleSeries>.

Please refer to ―13.Attributes, Styles, Functions and Events for Component‖ for the details.

The following layout is an example for MapBubbleSeries.

<KoolMap>

<MapChart id="mainMap1" showDataTips="true">

<series>

<MapSeries id="mapseries" interactive="false">

<filters>

20/119


</filters>

<showDataEffect>

<SeriesZoom duration="1000"/>

</showDataEffect>

<stroke>

<Stroke color="#BBBBBB" weight="0.8" alpha="1"/>

</stroke>

</MapSeries>

<MapBubbleSeries id="bubble" radiusField="sales" minRadius="5" color="#888888"

labelPosition="inside" displayName="Branch">

<fill>

<SolidColor color="#C8EC14"/>

</fill>

<showDataEffect>

<SeriesSlide duration="1000"/>

</showDataEffect>

<stroke>

<Stroke color="#BBBBBB"/>

</stroke>

</MapBubbleSeries>

</series>

</MapChart>

</KoolMap>

< Example 10 Layout forMapBubbleSeries >

< Figure 5 Output: MapBubbleSeries >

21/119

6.3. MapImageSeries

MapImageSeries displays the image file in the region. The URL of the image file needs to be set to the

value of the imageUrlField attribute. The display size of the image in the map chart can be set by the

imageWidth and imageHeight attributes.

If the value of the useRevisedCenter attribute is ―false‖, then the display location of the image will be the

center of the region; otherwise if the value is ―true‖, then the display location of the image will be defined

in Mapdatabase. The horizontalCenterGapField and verticalCenterGapField attributes are used to set the

offsets of the location.

The definition of MapImageSeries starts with <MapImageSeries> and ends with </MapImageSeries>.


The supported image formats are JPG, PNG, SVG.

The following layout is an example for MapImageSeries.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="false" showDataTips="true" showDataTipTargets="false"

dataTipJsFunction="dataTipFunction" itemClickJsFunction="itemClickFunction" gutterTop="25" gutterBottom="25">

<series>


<filters>


</filters>

<showDataEffect>


</showDataEffect>

<localFill>

<SolidColor color="#F9F9F9"/>

</localFill>

<stroke>


</stroke>

</MapSeries>

<MapImageSeries id="image" labelField="label" imageUrlField="imgurl"

horizontalCenterGapField="h" verticalCenterGapField="v" color="#888888" labelPosition="bottom"

displayName="Weather" imageWidth="30" imageHeight="30">

<fill>

<SolidColor color="#000000" alpha="0"/>

</fill>

<showDataEffect>


</showDataEffect>

<stroke>

22/119

<Stroke color="#FFFFFF" alpha="0"/>

</stroke>

</MapImageSeries>

</series>

</MapChart>

</KoolMap>

<Example 11 Layout forMapImageSeries >

< Figure 6 Output: MapImageSeries >

6.4. MapPanelSeries

MapPanelSeries draws text on the panel so that numeric value or text can be more visually represented.

The panel consists of the header and the body. The header has the region name, and the titileField and

titleJsFunction attributes are used to change the name. The text string on the body can be set by the

bodyTextField attribute, and the panel size can be set by the panelWidth and panelHeight attributes.

If the value of the useRevisedCenter attribute is ―false‖, then the display location of the panel will be the

center of the region; otherwise if the value is ―true‖, then the display location of the panel will be defined



The shape of the panel can be the vertical panel or the horizontal panel, which is set by the itemRenderer

attribute.

23/119

The definition of MapPanelSeries begins with <MapPanelSeries> and ends with </MapPanelSeries>.


The following layout is an example for MapPanelSeries.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="false" showDataTips="true"

dataTipJsFunction="dataTipFunction" itemClickJsFunction="itemClickFunction" showDataTipTargets="false"

gutterTop="15" gutterBottom="15">

<series>


<filters>


</filters>

<showDataEffect>


</showDataEffect>

<localFill>

<SolidColor color="#F9F9F9"/>

</localFill>

<stroke>


</stroke>

</MapSeries>

<MapPanelSeries id="panel" titleField="label" bodyTextField="temperature"

horizontalCenterGapField="h" verticalCenterGapField="v" bodyColor="#555555" color="#FFFFFF"

horizontalAlign="right" displayName="Weather" itemRenderer="VPanelItemRenderer" fill="#0B91FF" >

<showDataEffect>


</showDataEffect>

</MapPanelSeries>

</series>

</MapChart>

</KoolMap>

< Example 12 Layout forMapPanelSeries >

24/119

<Figure 7 Output: MapPanelSeries >

6.5. MapPlotSeries

MapPlotSeries draws plot shapes on the regions. The supported types of shapes are circle, rectangle,

triangle and ball, and the size of the shape is set to the radius attribute.

If the value of the useRevisedCenter attribute is ―false‖, then the display location of the shape will be the

center of the region; otherwise if the value is ―true‖, then the display location of the shape will be defined



The definition of MapPlotSeries begins with <MapPlotSeries> and ends with </MapPlotSeries>. Please

refer to ―13.Attributes, Styles, Functions and Events for Component‖ for the details.

The following layout is an example for MapPlotSeries.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="false" showDataTips="true"

dataTipJsFunction="dataTipFunction" itemClickJsFunction="itemClickFunction">

<series>


<filters>


</filters>

<showDataEffect>


</showDataEffect>

25/119

<stroke>


</stroke>

</MapSeries>

<MapPlotSeries id="plot1" areaCodeField="branchCode" labelField="branchName"

horizontalCenterGapField="h" verticalCenterGapField="v" adjustedRadius="10" labelPositionField="lapos"

color="#00E000" fontWeight="bold" labelPosition="bottom" displayName="Branch" fill="#00E000">

<showDataEffect>


</showDataEffect>

</MapPlotSeries>

<MapPlotSeries id="plot2" areaCodeField="factoryCode" labelField="factoryName"

horizontalCenterGapField="h" verticalCenterGapField="v" adjustedRadius="5" labelPositionField="lapos"

color="#00AAFF" fill="#00AAFF" fontWeight="bold" labelPosition="bottom" itemRenderer="TriangleItemRenderer"

displayName="Plant">

<showDataEffect>


</showDataEffect>

</MapPlotSeries>

</series>

</MapChart>

</KoolMap>

<Example 13 Layout forMapPlotSeries >

<Figure 8 Output: MapPlotSeries >

26/119

6.6. MapRouteSeries

MapRouteSeries represents the connecting line ( route ) between two regions so that the relation of the

regions can be visually represented. The dashed line type can be set by the dashed attribute.

If the value of the useRevisedCenter attribute is ―false‖, then the display location of the connecting line

( route ) will be the center of the region; otherwise if the value is ―true‖, then the display location of the

connecting line ( route ) will be defined in Mapdatabase. The fromHorizontalCenterGapField,

toHorizontalCenterGapField, fromVerticalCenterGapField and toVerticalCenterGapField attributes are used

to set the offsets of the location.

The definition of MapRouteSeries begins with <MapRouteSeries> and ends with </MapRouteSeries>.


The route between the between parent and child maps ( drilldown ) is not supported.

The following layout is an example for MapRouteSeries.

<KoolMap>

<MapChart id="mainMap">

<series>


<filters>


</filters>

<showDataEffect>


</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="Airport" dashed="true"

showLabel="false" curveField="curve">

<labelFilters>

<GlowFilter blurX="5" blurY="5" color="#111111"/>

</labelFilters>

<showDataEffect>


</showDataEffect>

</MapRouteSeries>

27/119

</series>

</MapChart>

</KoolMap>

< Example 14 Layout forMapRouteSeries >

< Figure 9 Output: MapRouteSeries >

6.7. MapSparkSeries

MapSparkSeries represents the spark chart on the region so that the data can be displayed as the chart

on the map. The supported chart types are column chart and pie chart.

If the value of the useRevisedCenter attribute is ―false‖, then the display location of the spark chart will be

the center of the region; otherwise if the value is ―true‖, then the display location of the spark chart will

be defined in Mapdatabase. The horizontalCenterGapField and verticalCenterGapField attributes are used

to set the offsets of the location.

The definition of MapRouteSeries begins with <MapSparkSeries> and ends with </MapSparkSeries>.


The following layout is an example for MapSparkSeries.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="true" showDataTips="false"


<series>


<localFill>

28/119

<SolidColor color="#F9F9F9" />

</localFill>

<filters>

<DropShadowFilter distance="1" angle="45" color="0x888888"/>

</filters>

<stroke>


</stroke>

</MapSeries>

<MapSparkSeries id="spark1" type="column" dataField="[2013,2014]" color="#333333"

labelPosition="inside" displayName="Branch" columnWidthRatio="0.9" 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>

<Box width="100%" horizontalAlign="center" paddingTop="20">

<SubLegend direction="horizontal" borderStyle="solid">

<LegendItem label="2013">

<fill>

<SolidColor color="#00B0BA"/>

</fill>

</LegendItem>

<LegendItem label="2014">

<fill>

<SolidColor color="#1966D8"/>

</fill>

</LegendItem>

</SubLegend>

</Box>

</KoolMap>

< Example 15 Layout forMapSpaekSeries >

29/119

< Figure 10 Output: MapSparkSeries >

6.8. MapDivSeries

MapDivSeries represents the <DIV> element of HTML on the chart. If you set the JavaScript function

name to the value of the customSeriesFunction attribute, then the return value ( HTML object ) of the

function will be inserted in the <DIV> element.

The coordinates of the place where the <DIV> element is displayed is determined by the region code,

and if the value of the useRevisedCenter attribute is false, then the coordinates will be the center of the

region, otherwise if the value is true, then the coordinates will be the coordinates redefined in

Mapdatabase. You can also adjust the coordinates by using horizontalCenterGapField and

verticalCenterGapField attributes.

The ID of the <DIV> element is created as ―The ID of SVG‖ + MdivItem, and you can use the target

attribute to add data to the <DIV> element.

The Zoom effect is supported in MapDivSeries.

The definition of MapDivSeries begins with <MapDivSeries> and ends with </MapDivSeries>. Please refer

to ―13.Attributes, Styles, Functions and Events for Component‖ for the details.

30/119

The following layout is an example for MapDivSeries.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="true" showDataTips="false"


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

</ KoolMap>

< Example 16 Layout for MapDivSeries >

31/119

< Figure 11 Output: MapDivSeries >

7. Color

The methods to set the color in KoolMap are to define <SolidColor>, <LinearGradient> and

<RadialGradient>. <SolidColor> is to represent a single color, and <LinearGradient> and

<RadialGradient> represent two or more colors with the gradient effect. The 3 methods can be used with

<localFill>, <disabledFill>, <rollOverFill> and <selectionFill> in MapSeries, and with <fill> in other series.

The method to draw a line is defining <Stroke>. This method can be used with <disalbedStroke>,

<stroke>, <rollOverStroke> and <selectionStroke> in MapSeries, and with <stroke> in other series.

Please refer to the following examples and samples.

7.1. Single Color

< Example 17 Single Color for MapSeries >

<MapSeries>

< localFill> <SolidColor color="#FFFF00”/>

</ localFill>

......

......

</ MapSeries >

*Example for MapSeries

32/119

7.2. Linear Gradation

< Example 18 Linear Gradient for MapSeries >

7.3. Radial Gradient

< Example 19 Radial Gradient for MapSeries >

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

<MapSeries>

<localFill>

<RadialGradient angle="-45"

focalPointRatio="-1.0">

<entries>

<GradientEntry color="#B3B3F3"

ratio="0.0"/>

<GradientEntry color="#8a8ac7"

ratio="0.5"/>

<GradientEntry

color="#6B6BB1"/>

</entries>

</RadialGradient>

</localFill>

......

</MapSeries>

33/119

7.4. Stroke

< Example 20 Stroke forMapSeries >

7.5. Shadow

The shadow filter can be defined in every series and label, and the supported shadow filters are

<DropShadowFilter> and <GlowFilter>.

If you want to set the shadow filter for all the series in the map chart, then you need to define

<seriesFilters>; otherwise if you want to set the shadow filter for each series, then you need to define

<filters> in the series. The label can be set by defining <labelFilters> in the series.

<DropShadowFilter> is a shadow filter with direction, and you can control the distance and angle of the

shadow.

※ Android phone and Safari browser are not supporting the filter effects ( Shadow, Glow ).

< Example 21 DropShadowFilter >

<MapSeries>

<stroke>

<Stroke color="#444444"

weight="0.25" alpha="0.25"/>

</stroke>

......

</ MapSeries >

<MapSeries>

<filters>

<DropShadowFilter

distance="10" angle="45"

color="#4e5979"/>

</filters>

......

</ MapSeries >

34/119

8. OnClick Function Call

The onclick function call can be handled when the user clicks a region in MapSeries or clicks an item in

other series.

8.1. Region Click

When the user clicks a region in the map chart, the information of the region can be used in the user

script, which allows the user to do a variety of tasks.

Firstly, you need to set the name of a JavaScript function to be called in the map chart, which can be

done by setting the function name to the value of the mapChangeJsFunction attribute in Layout.

As the example below shows, the JavaScript function, clickFunction, will be called when the user clicks a

region in the map chart. The JavaScript function, clickFunction, must be defined in the page script.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="false" mapChangeJsFunction="clickFunction">

<series>

<MapSeries id="mapseries" selectionMarking="line" labelPosition="inside" displayName="All Areas">

<showDataEffect>

<SeriesSlide duration="1000" direction="right"/>

</showDataEffect>

<stroke>


</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

< Example 22 Setting JavaScript Function Call >

Once the setting is done as < Example 22 Setting JavaScript Function Call >, you need to define the JavaScript

function in the page script as the example below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [

<html>

<head>




35/119


<--KoolMap Sample CSS -->




<script language="javascript" type="text/javascript" src="../LicenseKey/KoolMapLicense.js"></script>






<script language="javascript" type="text/javascript" src="./sampleHelper.js"></script>


// It sets the value of KoolOnLoadCallFunction to the name of a JS function (e.g. chartReadyHandler) that is called

when the chart is ready to be created.


// If the data format is JSON, then the following must be defined. ( If it is not defined, then the error will occur

because KoolMap recognizes the data format in XML.)


// KoolOnLoadCallFunction functions

// The functions will be called when the chart is ready to be created.

// Layout, Dataset, Mapdatabase and the map SVG will be passed to the map chart by these functions.

// Parameters : id – The user-defined ID used in KoolMap.create().

// The 7 callback functions

// 1. setLayout - It sets the string type of Layout.

// 2. setData - It sets the value of Array-formatted Dataset.

// 3. setMapDataBase - It sets the XML-formatted string of Mapdatabase.

// 4. setLayoutURLEx - It sets the URL of XML-formatted Layout.

// 5. setDataURLEx - It sets the URL of XML-formatted Dataset.

// 6. setMapDataBaseURLEx - It sets the URL of XML-formatted Mapdatabase.

// 7. setSourceURLEx - It sets the URL of the SVG map.






}

36/119

// The URL of Layout.

var layoutURL = "./LayoutXml/LayoutMapClickFunction.xml";

// If you want to include data via the URL (path) of the data file.

var dataURL = "./Data/data.txt";

// The URL of Mapdatabase

var mapDataBaseURL = "./MapDataBaseXml/USA.xml";

// The SVG map

var sourceURL = "./MapSource/USA.svg";

// It creates the chart

// Parameters

// 1. Chart ID : The ID of the map chart ( You can use any name you like )

// 2. DIV ID : The chart will be placed in this DIV

// 3. mapVars : The variables used for creating the chart

// 4. Chart Width : The default value is 100%

// 5. Chart Height : The default value is 100%


/*

// -------------- The JavaScript function called when the user clicks on the chart ---------------------------------

// The function name must be same with the value of the itemClickJsFunction attribute.

// e.g.) <MapChart mapChangeJsFunction="clickFunction">

//

// Parameters

// code : The region code ( mapDataBaseURL )

// label : The region name

// data : The data for the corresponding region ( data will be passed via dataURL )

//

// Return values

// none

*/

function clickFunction(code, label, data) {

alert("code:"+code+"\nlabel:"+label+"\ndata.sales:"+data.sales);

}



</script>

37/119

</head>

<body>

<div class="container">

<div class="header">

<p>KoolMap e.g) Onclick Function Call </p>

</div>

<div class="desc">

<b></b>

<button onclick="viewSrc()" style="font:11px Arial">View Source</button>

</div>




<div id="mapHolder" style="width:600px; height:480px;">

</div>

</div>

</body>

</html>

< Example 23 Creating JavaScript function to be called when the user clicks on the chart >

In the above example, < Example 23 Creating JavaScript function to be called when the user clicks on the chart >,

The JavaScript function, clickFunction, has 4 parameters.

Parameter Description

seriesId The series ID

code The region code clicked by the user ( It is defined in Mapdatabase )

label The region name ( It is defined in Mapdatabase )

data The data for the corresponding region ( The format is either XML or Array )

< Table 4 Parameters for the function to be called when the user clicks on the chart >

The following figure is the running result of the above script.

38/119

< Figure 12 Onclick function call >

8.2. Item Click

For the series other than MapSeries, the onclick function call on the item ( an object in series ) passes the

information of the clicked item to the script.

To set the onclick function call on the item, firstly, you need to set the name of a JavaScript function to

be called in the map chart, which can be done by setting the function name to the value of the

itemClickJsFunction attribute in Layout. Once you set the itemClickJsFunction attribute, the function of

which name is set to the value of the itemClickJsFunction attribute will be called when the user clicks an

item in the series ( except MapSeries ).

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="true" showDataTips="true"


<series>


<filters>


</filters>

39/119

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

<MapPlotSeries id="plot" labelField="branchName" horizontalCenterGapField="h"

verticalCenterGapField="v" Radius="5" adjustedRadius="10" labelPositionField="lapos" color="#00E000"

fontWeight="bold" labelPosition="bottom" displayName="Branch">

<showDataEffect>


</showDataEffect>

</MapPlotSeries>

</series>

</MapChart>

</KoolMap>

<Example 24 Setting onclick JavaScript function on Item >

Once the setting is done as <Example 24 Setting onclick JavaScript function on Item >, you need to define the

JavaScript function in the page script as the example below.


transitional.dtd">


<html>

<head>














40/119






because KoolMap recognizes the data format in XML. )





// Parameters : id ? The user-defined ID used in KoolMap.create().














}

// The URL of Layout

var layoutURL = "./LayoutXml/LayoutMapPlotSeries.xml";


var dataURL = "./Data/branchdata.txt";


var mapDataBaseURL = "./MapDataBaseXml/ USADrillDown.xml";

// The SVG map

var sourceURL = "./MapSource/ USADrillDown.svg";

41/119


// Parameters







/*

// ------------------------- The JavaScript function for the user-defined Tooltips -------------------------------------------

// The function name must be same with the value of the dataTipJsFunction attribute.

// e.g.) <MapChart dataTipJsFunction="dataTipFunction">

//

// Parameters

// seriesId : Series ID




//

// Return values

// The character string to be displayed on the region as tooltips

*/

function dataTipFunction(seriesId, code, label, data) {

if (seriesId == "plot") {

return data.branchName + " - " + data.address;

} else

return label;

}

/*

// -------------- The JavaScript function called when the user clicks on the chart ---------------------------------

// The function name must be same with the value of the itemClickJsFunction attribute.

// e.g.) <MapChart itemClickJsFunction="itemClickFunction">

//

// Parameters





//

// Return values

// none

42/119

*/

function itemClickFunction(seriesId, code, label, data) {

alert("code:"+code+"\nlabel:"+label+"\naddress:"+data.address);

}


</script>

</head>

<body>



<div id="mapHolder">

</div>

</div>

</body>

</html>

< Example 25 Creating JavaScript function to be called when the user clicks on the item >

In the above example, < Example 23 Creating JavaScript function to be called when the user clicks on the chart >,

The JavaScript function, itemClickFunction, has 4 parameters.






< Table 5 Parameters for the function to be called when the user clicks on the item >


43/119

< Figure 13 Onclick function call on the item >

8.3. Parent Map, Outside Map

Once you drill down to the child map, you can move back to the original map by clicking the back

button or clicking outside the map. When you move back to the original map the JavaScript function can

be called, and you can do a variety of tasks.

To set the onclick function call on the back button, firstly, you need to set the name of a JavaScript

function to be called in the map chart, which can be done by setting the function name to the value of

the backToMapJsFunction attribute in Layout. For example, the following Layout is to set the JavaScript

function, backFunction, to the backToMapJsFunction attribute. The JavaScript function, backFunction, must

be defined in the page script

<KoolMap>

<MapChart id="mainMap1" showDataTips="true" backToMapJsFunction="backFunction">

<series>

<MapSeries id="mapseries" interactive="true" selectionMarking="line" color="#777777"

labelPosition="inside" displayName="Map" fontSize="9">

<filters>

44/119


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

< Example 26 Setting onclick JavaScript function on Back button or Outside Map >

Once the setting is done as < Example 22 Setting JavaScript Function Call >, you need to define the JavaScript

function in the page script as the example below.


transitional.dtd">


<html>

<head>

















45/119



because KoolMap recognizes the data format in XML. )





// Parameters : id ? The user-defined ID used in KoolMap.create().














}

// The URL of Layout

var layoutURL = "./LayoutXml/ LayoutBackToMap.xml ";


var dataURL = "./Data/data.txt";


var mapDataBaseURL = "./MapDataBaseXml/USADrillDown.xml";

// The SVG map

var sourceURL = "./MapSource/USADrillDown.svg";


// Parameters




46/119




/*

// ----------------------- The JavaScript function called when the user clicks on the back button -----------------------

// The function name must be same with the value of the backToMapJsFunction attribute.

// e.g.) <MapChart backToMapJsFunction="clickFunction">

//

// Parameters




//

// Return values

// none

*/

function backFunction(code, label, data) {

alert("back to the main map ‖);

}


</script>

</head>

<body>



<div id="mapHolder">

</div>

</div>

</body>

</html>

< Example 27 Creating JavaScript function to be called when the user clicks on the back button >


47/119

< Figure 14 Onclick function call on the back button >

9. User-defined Function

Ther user-defined function can be used for the following 5 cases.

1. User-defined tooltips

2. User-defined label ( region name )

3. User-defined title

4. User-defined color for regions

5. User-defined fill color

The user-defined function in KoolMap can be configured by creating a JavaScript function, and setting

the name of the JavaScript function to the value of the corresponding attribute in Layout.

9.1. Tooltips

If the showDataTips attribute is true, then tooltips will be displayed when the user mouse over the item in

the chart. The user-defined tooltips can be displayed by setting the name of the JavaScript function to

48/119

the value of the dataTipJsFunction attribute in Layout, and creating the JavaScript function which has the

display module of tooltips.

The following Layout shows how to display the user-defined tooltips in the chart.

<KoolMap>

<MapChart id="mainMap" showDataTips="true" dataTipJsFunction="dataTipFunction">

<series>

<MapSeries id="mapseries" selectionMarking="line" labelPosition="inside" displayName="Map Series">

<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

< Example 28 Layout for User-defined Tooltips >

Once you set the showDataTips attribute to true and set the JavaScript function name to the

dataTipJsFunction attribute in Layout, you need to create the JavaScript function in the page script (html,

jsp, php, etc) as the example below.

/*

// ------------------------- The JavaScript function for the user-defined tooltips -------------------------------------------

// The function name must be same with the value of the dataTipJsFunction attribute.

// e.g.) <MapChart dataTipJsFunction="dataTipFunction">

//

// Parameters





//

// Return values

// The tooltips string to be displayed for the region

*/

49/119

function dataTipFunction(seriesId, code, label, data) {

if (seriesId == "plot") {

return data.branchName + " - " + data.address;

} else

return label;

}

< Example 29 JavaScript Function for User-defined tooltips>

HTML tags are not supported in the user-defined tooltips.

The following 4 parameters need to be defined in the JavaScript function.






< Table 6 Parameters for the function for the user-defined tooltips >

< Figure 25 Uuser-defined tooltips >

50/119

9.2. Label

The labelJsFunction attribute in MapSeries, MapBubbleSeries, MapImageSeries and MapPlotSeries needs

to be set to display the user-defined label in the chart.

The following Layout shows how to display the user-defined label in the chart.

< Example 30 Layout for User-defined Label >

/*

// ------------------------- The JavaScript function for the user-defined label ----------------------------------------

// The function name must be same with the value of the labelJsFunction attribute.

// e.g.) <MapSeries labelJsFunction="labelFunction">

//

// Parameters





//

// Return values

// The label string to be displayed for the region

*/

<KoolMap>


<series>

<MapSeries id="mapseries" labelPosition="inside" hideOverSizeLabel="false"

labelJsFunction="labelFunction">

<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

51/119

function labelFunction(seriesId, code, label, data) {

if (code == "1000")

return {"text":"AL", "color":"#FF0000"};

else if (code == "5000")

return {"color":"#FF0000"};


return {"text":"Conn", "color":"#FF0000"};


return {"text":"Md", "color":"#FF0000"};


return {"text":"Mass", "color":"#00FF00"};


return {"text":" Michigan"};


return {"text":"N.H", "color":"#FF0000"};


return {"color":"#0000FF"};


return {"text":" "};


return {"text":"W.Va", "color":"#00FF00"};

return label;

}

< Example 31 JavaScript Function for User-defined label >

52/119

< Figure 36 User-defined label >

9.3. Title

The titleJsFunction attribute in MapPanelSeries needs to be set to display the user-defined title in the

chart.

The following Layout shows how to display the user-defined title in the chart.

<KoolMap>

<MapChart id="mainMap" gutterTop="15" gutterBottom="15">

<series>


<filters>


</filters>

<showDataEffect>


</showDataEffect>

<localFill>

<SolidColor color="#EEEEEE"/>

53/119

< Example 32 Layout for User-defined Title >

/*

// ------------------------- The JavaScript function for the user-defined title -----------------------------------------

// The function name must be same with the value of the titleJsFunction attribute.

// e.g.) <MapPanelSeries titleJsFunction="titleFunction">

// Parameters





//

// Return values

// The title string to be displayed for the region

*/

function titleFunction(seriesId, code, label, data) {

if (data.id == "w01")

return "The State of Illinois";

else if (data.id == "w02")

return "The State of Alaska";


return "The State of Idaho";


return "The State of Florida";

return label;}

<Example 33 JavaScript Function for User-defined title >

</localFill>

<stroke>


</stroke>

</MapSeries>

<MapPanelSeries id="panel" titleJsFunction="titleFunction" bodyTextField="temperature"

horizontalCenterGapField="h" verticalCenterGapField="v"

color="#555555" horizontalAlign="right" displayName="Weather">

<showDataEffect>


</showDataEffect>

</MapPanelSeries>

</series>

</MapChart>

</KoolMap>

54/119

< Figure 47 User-defined title >

9.4. Color

If you want to fill the color in the region based on your preference, then the localFillJsFunction attribute

in MapSeries needs to be set.

If you want to fill a solid color, then you need to make the JavaScript function return a color code;

otherwise if you want to fill a linear gradient or a radial gradient, then you need to make the JavaScript

function return the value with the following format.

- Linear Gradient

1. [#FFFF00,#0000FF] : The JavaScript function returns the value with the color array.

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}]}] : The JavaScript function returns

the value with LinearGradient attribute. For the LinearGradient attribute, Please refer to

―13.Attributes, Styles, Functions and Events for Component‖.

- Radial Gradient

1. [{"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}]}] : The JavaScript function

returns the value with RadialGradient attribute. For the RadialGradient attribute, Please refer to

―13.Attributes, Styles, Functions and Events for Component‖.

55/119

The following Layout shows how to fill the user-defined color in the chart.

<KoolMap>


<series>

<MapSeries id="mapseries" localFillJsFunction="colorFunction">

<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

< Example 34 Layout for User-defined Color >

Once you set the localFillJsFunction attribute in Layout, you need to create the JavaScript function in the

page script (html, jsp, php, etc) as the example below.

/*

// ------------------------- The JavaScript function for the user-defined color -------------------------------------------

// The function name must be same with the value of the localFillJsFunction attribute.

// e.g.) <MapSeries localFillJsFunction="colorFunction">

//

// Parameters




//

// Return values

// The color to be filled in the region

*/

function colorFunction(code, label, data) {

if (code == "100" || data.sales < 30)

return #FF0000;

else if (code == "900" || data.sales < 50)

56/119

return #FF6600;


return #FFCC00;

else

return #FFFF00;

}

< Example 35 JavaScript Function for User-defined color >

< Figure 58 User-defined color >

9.5. Item Color

If you want to fill the color in the item based on your preference, then the fillJsFunction attribute in

corresponding series needs to be set.

The following Layout shows how to fill the user-defined color in the item of MapPanelSeries.

<KoolMap>

<MapChart id="mainMap" showDataTips="true" gutterTop="15" gutterBottom="15">

<series>

<MapSeries id="mapseries" displayName="Map Series">

57/119

<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

<MapPanelSeries id="panel" titleField="label" bodyTextField="temperature" horizontalCenterGapField="h"

verticalCenterGapField="v"

color="#555555" horizontalAlign="right" fillJsFunction="fillFunction" displayName="Weather">

<showDataEffect>


</showDataEffect>

</MapPanelSeries>

</series>

</MapChart>

</KoolMap>

< Example 36 Layout for User-defined Color in Item >

Once you set the fillJsFunction attribute in Layout, you need to create the JavaScript function in the page

script (html, jsp, php, etc) as the example below.

/*

// ------------------------- The JavaScript function for the user-defined color in the item ---------------------------------

// The function name must be same with the value of the fillJsFunction attribute.

// e.g.) <MapPanelSeries fillJsFunction="fillFunction">

//

// Parameters

// seriesId : MapSeries ID




//

// Return values

// The color to be filled in the item

*/

function fillFunction(seriesId, code, label, data) {

if (data.temperature < 8)

return #FF0000;

58/119

else if (data.temperature < 10)

return #FF6600;

else if (data.temperature < 14)

return #FFCC00;

else

return #FFFF00;

}

< Example 37 JavaScript Function for User-defined color in the item >

< Figure 69 User-defined color in the item >

9.6. User-defined Color for the Border of the Region

You can set the color for the border of the region by setting the value of the strokeJsFunction attribute

to the JavaScript function which returns the color code.

If the function returns a color code, then the single color will be applied, and both the color and the line

width can be returned as follows:

- Object

1. {―color‖:‖color code‖, ―width‖:value}

The following Layout shows how to set the JavaScript function name to the value of the strokeJsfunction

attribute.

59/119

<KoolMap>

<MapChart id="mainMap" showDataTips="true">

<series>

<MapSeries id="mapseries" selectionMarking="line" displayName="Map Series"

strokeJsFunction="strokeFunction">

<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>

<Stroke color="#F9F9F9" weight="0.8" alpha="1"/>

</stroke>

</MapSeries>

</series>

</MapChart>

</KoolMap>

< Example 38 User-defined color for the border of the region >

The following script shows how to define the JavaScript function which returns the color for the border of

the region in html, jsp, php, asp, etc.

/*

// ------------------------- User-defined stroke function for the border line of the region---------------------------------

// The function name must be same with the value of the strokeJsFunction attribute.

// e.g.) <MapSeries strokeJsFunction="strokeFunction">

//

// Parameters


// label : The region name.


//

// Return values

// color

*/

function strokeFunction(code, label, data) {

if (code == "1000" || data.sales < 30)

return {"color":"#88FF88","width":3};


60/119

return {"color":"#FF8888","width":5};


return "#407efb";

else

return "#3057d4";

}

< Example 39 JavaScript Function for User-defined color for the border of the region >

< Figure 20 User-defined color for the border of the region >

10. Legend

Two legend types are supported in KoolMap. One is represented by series, and the other is represented

by user input.

Legend by series can be created automatically by setting the value of the dataProvider attribute to ID of

MapChart. If you want to exclude MapSeries in Legend, then you need to set the value of the

legendEnabled attribute in MapSeries to false. The display text in Legend can be defined by setting the

displayName attribute

The other type of Legend can be created by setting <LegendItem>.

The following Layout shows how to create Legend by series.

61/119

<KoolMap horizontalAlign="center">

<MapChart id="mainMap>

<series>


<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

<MapPlotSeries id="plot1" areaCodeField="branchCode" labelField="branchName"

horizontalCenterGapField="h" verticalCenterGapField="v" adjustedRadius="5"

labelPositionField="lapos" color="#FFFFFF" fontWeight="bold" labelPosition="bottom"

displayName="Branch">

<labelFilters>


</labelFilters>

<showDataEffect>


</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="Factory">

<labelFilters>


</labelFilters>

<showDataEffect>


</showDataEffect>

</MapPlotSeries>

</series>

</MapChart>

<Legend dataProvider="{mainMap}" useVisibleCheck="true" horizontalGap="3" direction="horizontal"

borderStyle="solid" borderColor="#999999"/>

</KoolMap>

< Example 40 Layout for Creating Legend by Series >

62/119

< Figure 21 Creating Legend by Series >

The following Layout shows how to create Legend by setting <LegendItems>.

<KoolMap>

<MapChart id="mainMap" showDataTips="true">

<series>

<MapSeries id="mapseries" selectionMarking="line" labelPosition="inside" displayName="Map Series"

localFillJsFunction="colorFunction">

<filters>


</filters>

<showDataEffect>


</showDataEffect>

<stroke>


</stroke>

</MapSeries>

</series>

</MapChart>

<Box width="100%" horizontalAlign="center" paddingTop="20">

<SubLegend direction="horizontal" borderStyle="solid" borderColor="#999999" backgroundColor="#FFFFFF">

<LegendItem label="less than 30 ">

<fill>


</fill>

63/119

</LegendItem>


<fill>


</fill>

</LegendItem>


<fill>

<SolidColor color="#FFCC00"/>

</fill>

</LegendItem>

<LegendItem label="more than 90 ">

<fill>

<SolidColor color="#FFFF00"/>

</fill>

</LegendItem>

</SubLegend>

</Box>

</KoolMap>

< Example 41 Layout for Creating Legend by LegendItem >

< Figure 22 Creating Legend by Legend Item >

64/119

11. Advanced Features

11.1. Effect

There are 3 kinds of effects in the map chart, SeriesInterpolate, SeriesSlide and SeriesZoom, which are

applied while data is being rendered in each series.

SeriesInterpolate : The SeriesInterpolate effect gradually moves the data points from the start

value (0) to the actual values.

SeriesSlide : The SeriesSlide effect offers the sliding effect while data is being rendered.

SeriesZoom : The SeriesZoom effect starts at the reference point in the chart and gradually

expands.

The following Layout shows how to set the SeriesSlide effect in the chart.

<KoolMap>

<MapChart>

<MapSeries>

<showDataEffect>

<SeriesSlide duration="1000" // It sets the attributes of the SeriesSlide effect.

direction="down"

minimumElementDuration="20"

perElementOffset=‖0‖

elementOffset="30"/>

</showDataEffect>

</MapSeries>

<MapBubbleSeries radiusField="Cost">

<showDataEffect>

< SeriesSlide /> // It sets the default values to the attributes of the SeriesLide effect.

</showDataEffect>

</ MapBubbleSeries>

……

……

</KoolMap>

< Example 42 Layout for Setting SeriesSlide >

The effect of each element on the chart starts after 30 milliseconds ( elementOffset="30" ) of the effect of

the previous element. The time taken for the effect of each element is 20 milliseconds

65/119

( minimumElementDuration="20" ), and the total time taken for all elements is 1000 milliseconds

( duration="1000" ). The sliding direction is downward ( direction="down" ).

The actual effect displayed depends on the user's computer hardware and the number of images in the

chart, so please be cautious to use the effect if many images are to be included in the chart.

11.2. Zooming and Showing Crosshairs

The zooming feature enables you to enlarge the certain area of the chart, and displaying the mouse

pointer as crosshairs is a convenient way to locate a particular point on the chart. The zooming and

displaying crosshairs are enabled by setting the MapCrossHair element.

( Displaying Crosshairs is not supported in mobile devices. )

The following Layout shows how to set MapCrossHair element.

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="true" scaleMode="manual">

<series>

<MapSeries id="mapseries" interactive="true" selectionMarking="line" color="#777777" displayName="Map">

<filters>


</filters>

<stroke>


</stroke>

</MapSeries>

</series>

<annotationElements>

<MapCrossHair/>

</annotationElements>

</MapChart>

</KoolMap>

< Example 43 Layout for Displaying Crosshairs >

11.3. Map Navigator

You can use the map navigator to zoom in / out and to move the chart to left or right or up or down by

the button click, which is enabled by setting the MapNavigator element.

The following Layout shows how to set MapNavigator element.

66/119

<KoolMap>

<MapChart id="mainMap" drillDownEnabled="true" scaleMode="manual">

<series>

<MapSeries id="mapseries" interactive="true" selectionMarking="line" color="#777777" displayName="Map">

<filters>


</filters>

<stroke>


</stroke>

</MapSeries>

</series>

<annotationElements>

<MapNavigator/>

</annotationElements>

</MapChart>

</KoolMap>

< Example 44 Layout for Using Map Navigator >

12. Creating and Editing SVG Map

12.1. SVG

SVG ( Scalable Vector Graphics ) is a W3C ( World Wide Web Consortium ) standard for Vector Graphic,

which is to represent two dimensional vector graph written in XML format. As the SVG image is written in

XML-formatted text, the searching, cataloguing and scripting are possible for the SVG image.

The SVG map is used in KoolMap, and you can create a new SVG map or modify the SVG maps included

in KoolMap. You can use any tool you prefer to create or modify the SVG maps, and must obey the

following constraints:

1. The SVG map created by using the library functions are not recognized in KoolMap.

2. The supported elements in KoolMap are Path, Rectangle and Group. Other than those elements

are not supported in KoolMap.

3. The Name attribute defined in each object must be same with the symbol name in Mapdatabase,

and the Name attribute defined in Group is recognized together with the descendants ( Path,

Rectangle ) as a single image.

4. The image which is to be displayed in the same screen must be defined as the same layer of the

depth or contained in the same Group.

67/119

5. The Name attribute defined in an object must be unique in the entire SVG image. If there are

multiple same Name in the SVG image, then the Name defined at the first will be displayed in

the chart.

6. The Stroke attribute defined in the SVG map is ignored, and the Stroke attribute defined in

MapSeries will be applied in the chart.

7. The color must be RGB values.

8. In Preferences -> Units, Identify Object must be same with XML ID, and the Name attribute in the

object must be defined as the path ID of the SVG image. The path ID of the SVG image can be

found by using any text editor ( e.g. Notepad ).

9. The default size of the image is the same size when the size ratio is 100% in the authoring tool

( illustrator ).

10. If the localFill and localFillFunction attributes in MapSeries are not set, then the color defined in

the SVG map will be used to fill color in the chart.

11. Before you create your SVG map, please refer to the sample SVG maps included in KoolMap.

13. Attributes, Styles, Functions and Events for Component

13.1. MapChart

The attributes of the chart level are defined in the MapChart component.

The supported attributes and their values and descriptions


alpha Number (0~1)

(default value : 1)

It sets the transparency.

areaCodeField String

It sets the field name of the region code.

Once it is defined in MapChart, it will be

used as the default value for descendant

series.

(default value : code)

backImageX Number

(default value : 10)

It sets the X- coordinate of the back image

in the sub-map.

backImageY Number


It sets the Y- coordinate of the back image

in the sub-map.

centerX Number

(default value : 0)

It sets the X- coordinate of the center point.

centerY Number It sets the Y- coordinate of the center point.

68/119

(default value : 0)

chartScaleX Number

(default value : 1)

It sets the scale (from 0.1 to 25) of the X-

axis.

chartScaleY Number

(default value : 1)

It sets the scale (from 0.1 to 25) of the Y-

axis.

dataProvider Object

It sets Dataset.

It is provided by the functions, dataURL() or

setData().

drillDownEnabled Boolean(true)

Whether or not to display sub-maps (city,

province) when the user clicks on the chart.

The sub-map must be defined in

Mapdatabase.

dataTipJsFunction Function

It sets the user-defined tooltips.

The parameters of the function,

dataTipJsFunction() are as follows:

function dataTipJsFunction (seriesId:String,

code:String, label:String,

data:Object)

seriresId : Series ID

code : The region code

label : The region name

data : The data for the corresponding

region

height Number It sete the height by pixel or %.

itemClickJsFunction Function

It sets the JavaScript function to be called

when the user clicks on the item.


itemClickJsFunction, are as follows:

function itemClickJsFunction (seriesId:String,


data:Object)





69/119

region

mapChangeJsFunction Function


when the user clicks on the region.


mapChangeJsFunction, are as follows:

function mapChangeJsFunction (code:String,

label:String, data:Object)




region

openCode String

It sets the current region the user is

viewing.

If there are descendant regions and the

drillDownEnabled attribute is true, then the

chart will move to the region.

The initial value is ―‖, which is the top level

of the map.

percentCenterX Number

(default value : 0)

The X-coordinate of the center point

represented by the percentage value.

If the value is 0, then the center location is

at the center point. If the value is 100, then

the center location is at the right end;

otherwise if the value is -100, then the

center location is at the left end.

percentCenterY Number

(default value : 0)

The Y-coordinate of the center point

represented by the percentage value.

If the value is 0, then the center location is

at the center point. If the value is 100, then

the center location is at the bottom end;

otherwise if the value is -100, then the

center location is at the top end.

rootCode String

The region to be displayed when the chart

is loaded.

If the region cannot be displayed, then the

top-level region will be displayed.

70/119

scaleMode ―auto‖,‖manual‖

(default value : ―auto‖)

It sets the scale mode.

If the value is "auto", then the map will be

resized to the screen size automatically;

otherwise if the value is ―manual‖, then the

map will be resized by the specified

percentage.

selectedCode String

It sets the selected region code.

The default value is null.

seriesFilters Array

It sets the filter to be applied to the series.

DropShadowFilter and GlowFilter are

available, and multiple filters can be set.

showAllDataTips Boolean

(default value : false)

Whether or not to display all tooltips when

the chart is loaded.

showDataTips Boolean

(default value : false)

Whether or not to display tooltips when the

user mouse over the region.

styleName String It sets the style.

visible Boolean

(default value : true)

Whether or not to make it visible.

width Number It sete the width by pixel or %.

The supported styles and their values and descriptions

Style Value Description

color RGB It sets the text color.

disabledColor RGB It sets the text color of the lock mode.

fontFamily Font Name It sets the font name.

fontSize Number (pixel) It sets the font size by pixel.

fontStyle ―normal‖,‖italic‖ It sets the font style.

fontWeight ―normal‖,‖bold‖ It sets the font weight.

gutterLeft Number (0)

It sets the space between the left end of the

map chart and the left end of the data region

by pixel.

gutterRight Number (0)

It sets the space between the right end of the

map chart and the right end of the data

region by pixel.

gutterTop Number (0) It sets the space between the top end of the

71/119

map chart and the top end of the data region

by pixel.

gutterBottom Number (5)

It sets the space between the bottom end of

the map chart and the bottom end of the

data region by pixel.

maximumDataTipCount Number It sets the maximum number of displayable

tooltips.

paddingBottom Number


It sets the space bettween the bottom end

and the bottom end of the content area by

pixel.

paddingTop Number


It sets the space bettween the top end and

the top end of the content area by pixel.

paddingLeft Number


It sets the space bettween the left end and

the left end of the content area by pixel.

paddingRight Number


It sets the space bettween the right end and

the right end of the content area by pixel.

showDataTipTargets Boolean (true) Whether or not to show the point when

tooltips is displayed.

textDecoration ―underline‖, ‖none‖ It sets the text decoration.

The supported functions and their descriptions

Function Description

addEventListener()

function addEventListener(type:String, listener:Function):void

It sets the event listener function to be called when the event occurs.

Parameters

- type:String – the event type

- listener:Function – the function to be called when the event occurs

clearSelection()

function clearSelection():void

It clears the selected history.

clearStyle()

function clearStyle(styleProp:String):*

It clears the style registered in the component.

Parameters

http://livedocs.adobe.com/flex/3/langref/specialTypes.html#void

http://livedocs.adobe.com/flex/3/langref/specialTypes.html#*

http://livedocs.adobe.com/flex/3/langref/Object.html


72/119

- styleProp:String the style name

drawFoucs()

function drawFocus(isFocused:Boolean):void

It hides or displays the focus in the component.

Parameters

- isFocused:Boolean – true : display, false : hide

getCodeRectangle()

function getCodeRectangle(code:String):Rectangle

It returns the location and size of the specified region.

Parameters

- code:String the region code

Returns

- Rectangle: the Rectangle object, which represents the location and size of

the region

getCodeCenterPosition()

function getCodeCenterPosition(code:String, useRevisedCenter:Boolean =

false):Point

It returns the center point of the region.

Parameters


- useRevisedCenter:Boolean whether or not to apply the new center point

defined in mapDataBase

Returns

- Point: the Point object, which represents the center point of the region

getStyle()

function getStyle(styleProp:String):*

It returns the style value.

Parameters


Returns

- *: the style value










73/119

moveCenterTo()

function moveCenterTo (code:String, useRevisedCenter:Boolean = false,

withEffect:Boolean = true):void

It moves the center point to the region.

Parameters


- useRevisedCenter:Boolean whether or not to apply the new center point

defined in mapDataBase

- withEffect:Boolean whether or not to apply the effect when moving to the

new center point

setStyle()

function setStyle(styleProp:String, newValue:*):void

It sets the style value.

Parameters


- newValue:* the style value

removeEventListener()

function removeEventListener(type:String, listener:Function):void

It removes the listener function.

Parameters

- type:String – the event name

- listener:Function – the functiom name

The supported events and their descriptions

Event Description

change

This event occurs when the user clicks the mouse to change the selection.

Details

- hitData : the first item on which the user clicks (refer to HitData)

- hitSet : the Array of the clicked item (refer to HitData)

click

This event occurs when the user clicks the mouse.

Details

- altKey : whether or not the Alt key is clicked

- controlKey : whether or not the Ctrl key is clicked









74/119

- ctrlKey : whether or not the Ctrl key is clicked (for Mac)

- shiftKey : whether or not the Shift key is clicked

- stageX : the X-coordinate

- stageY : the Y-coordinate

doubleClick

This event occurs when the user double clicks the mouse.

Details







effectEnd This event occurs when the effect ends

effectStart This event occurs when the effect starts

effectStop This event occurs when the effect forcely stop

itemClick

This event occurs when the user clicks on the item.

Details



itemDoubleClick

This event occurs when the user double clicks on the item.

Details



itemRollOver

This event occurs when the user rolls over the item.

Details

- hitData : the first item over which the user rolls (refer to HitData)

- hitSet : the Array of the rolled item (refer to HitData)

keyDown

This event occurs when the user presses the key.

Details

- charCode : the character code of the pressed key

- controlKey : whether or not the Ctrl key is pressed

- ctrlKey : whether or not the Ctrl key is pressed (for Mac)

- keyCode : the key code of the pressed key

75/119

- keyLocation : the key location of the pressed key

- shiftKey : whether or not the Shift key is pressed

keyUp

This event occurs when the user releases the key.

Details

- charCode : the character code of the released key

- controlKey : whether or not the Ctrl key is released

- ctrlKey : whether or not the Ctrl key is released (for Mac)

- keyCode : the key code of the released key

- keyLocation : the key location of the released key

- shiftKey : whether or not the Shift key is released

13.2. MapSeries

The MapSeries component represents the map.



alpha Number (0~1)

(default value : 1)


areaCodeField String It sets the field name for the region code.


enabledField String

It sets the filed name of the data provider

which enables the user to select the image

for the region.

filters Array




goUpButtonOnly Boolean(false) Whether or not to move back to the parent

map by using only the button.

hideDataEffect Effect It sets the effect to be applied when the

image of the region disappears.

hideOverSizeLabel Boolean (true)

Whether or not to hide the label when the

label size is bigger than the image of the

region.

interactive Boolean (true) Whether or not to react to the user’s

76/119

mouse operation.

If the value is ―false‖, then mouse roll over

or click will not work, and the disabledFill

attribute will be applied for the color.

labelFilters Array

It sets the filter to be applied to the label.



labelField String It sets the filed name of the data provider

which sets the label of the region.

labelJsFunction Function

It sets the JavaScript function which returns

the user-defined label (region name).


labelJsFunction, are as follows:

function labelJsFunction (seriesId:String,


data:Object)





region

legendEnabled Boolean(false) Whether or not to be displayed in Legend

lineHeight Number It sets the indentation for the word wrap.

localFillJsFunction Function


the user-defined color for the region.


localFillJsFunction, are as follows:

function localFillJsFunction (code:String,





region

pattern String

It sets the pattern applied to the region.

The image files for the pattern can be

found in the KoolMap/Assets/Patterns

77/119

directory, and you need to set the image

file name to the value.

If the localFill attribute is used, then the

color set to the value of the localFill

attribute will be filled in the region.

selectionMarking ―line‖,‖blink‖‖color‖,‖none‖

(color)

It sets the display mode of the image when

the user clicks on the image

The valid values are "line", ―blink‖, "color",

"none"

"line" : diagonal line

―blink‖ : blinking

"color" : the selectionFill attribute will be

applied for the color

"none" : no special display mode

showDataEffect Effect It sets the effect method to be applied

when the image of the region displays.

strokeJsFunction Function


the color for the border of the region.

Parameters:

function strokeJsFunction (code:String,





region

useHandCursor Boolean (false) Whether or not to display Hand cursor.


visible Boolean (true) Whether or not to make it visible.



blinkInterval Number


It sets the blinking time of the selected

region. (millisecond)



78/119

disabledFill RGB It sets the color for the region which cannot

be selected by the user.

disabledStroke RGB It sets the color for the border line of the

region which cannot be selected by the user.





labelPosition ―none,‖inside‖

(default value : none)

It sets the label location.

If the value is ―none‖, then the label will not

be displayed.

localFill RGB

The default color of the image of the region.

If the value is not set, then the color of the

SVG map will be used.

rollOverFill RGB It sets the color of the image of the region

when the user mouse over the region.

rollOverStroke RGB It sets the color of the border line of the

region when the user mouse over the region.

selectionFill RGB

It sets the color of the image of the selected

(clicked) region.

If selectionMarking = ―color‖

selectionStroke RGB It sets the color of the border line of the

selected (clicked) region

selectionMarkLineColor RGB

It sets the color of the line of the selected

(clicked) region.

If selectionMarking = ―line‖

selectionMarkLineGap Number(6)

It sets the line interval of the selected (clicked)

region.

If selectionMarking = ―line‖

stroke RGB It sets the color of the border line of the

region.

textDecoration ―underline‖,‖none‖ It sets the text decoration.

toolTipBorderColor RGB It sets the color of the frame line of tooltips.



79/119

addEventListener()



Parameters



clearStyle()



Parameters


getStyle()



Parameters


Returns


setStyle()



Parameters






Parameters















80/119

Event Description

click


Details







doubleClick


Details







effectEnd This event occurs when the effect ends.

effectStart This event occurs when the effect starts.

effectStop This event occurs when the effect forcely stop.

keyDown


Details







keyUp


Details





81/119



13.3. MapBubbleSeries

The MapBubbleSeries component draws the circle on the map.



alpha Number (0~1)

(default value : 1)


areaCodeField String It sets the field name of the region code.


fillJsFunction Function


to return the user-defined color of the

circle.


fillJsFunction are as follows:

function fillJsFunction (seriresId :String,


data:Object)





region

filters Array






horizontalCenterGapField String

It sets the field name of the data provider

which sets the horizontal offset of the

center point.

interactive Boolean (true) Whether or not to react to the user’s

mouse operation.

82/119


or click will not work, and the

itemDisabledColor attribute will be applied

for the color.

labelFilters Array













data:Object)





region

maxRadius Number (40) It sets the maximum radius (pixel).

minRadius Number (0) It sets the minimum radius (pixel).

radiusField String It sets the field name for the value of each

region in dataProvider.





useRevisedCenter Boolean (true) Whether or not to apply the new center

point defined in mapDataBase.

verticalCenterGapField String


which sets the vertical offset of the center

point.


83/119



adjustedRadius Number (2) It sets the number of pixels to be increased

when the user selects or rolls over the region.



fill RGB It sets the fill color of the circle.





itemRenderer String It sets the drawing renderer for the circle.

(CircleItemRenderer, BallItemRenderer)

labelPosition ―none,‖inside‖



stroke RGB It sets the color of the line of the circle.




addEventListener()



Parameters



clearStyle()



Parameters


getStyle() function getStyle(styleProp:String):*







84/119


Parameters


Returns


setStyle()



Parameters






Parameters




Event Description

click


Details







doubleClick


Details







85/119









keyDown


Details







keyUp


Details







13.4. MapImageSeries

The MapImageSeries component draws the image on the map.



alpha Number (0~1)

(default value : 1)


areaCodeField String It sets the field name of the region code.

86/119




the user-defined color for the image.


fillJsFunction, are as follows:



data:Object)





region

filters Array





series disappears.




center point.

imageWidth Number

It sets the width of the image.

If it is not defined, then the original image

will be displayed.

imageHeight Number

It sets the height of the image.

If it is not defined, then the original image

will be displayed.

imageUrlField String It sets the field name for the URL of the

image of each region in dataProvider.

interactive Boolean (true)

Whether or not to react to the user’s

mouse operation.




for the color.

labelFilters Array It sets the filter to be applied to the label.


87/119











data:Object)





region

labelPositionField String

It sets the field name of the data provider,

which sets the label location.

The valid values are

―top‖, ‖left‖, ‖right‖, ‖bottom‖ and ‖none‖.

rotateField String It sets the field name which has the

rotation value of the image.

selectedCircle Boolean(true) Whether or not to use the circle mark for

the selected region.

selectedFill RGB It sets the color of the circle mark.


when the series displays.








point.

visible Boolean(true) Whether or not to make it visible.


88/119






fill RGB It sets the fill color of the circle.





labelPosition

―none‖, ‖top‖, ―bottom‖,

―left‖, ―right‖



stroke RGB It sets the color of the line of the circle.


toolTipBorderColor RGB It sets the color of the frame line of tooltips.



addEventListener()



Parameters



clearStyle()



Parameters


getStyle()









89/119

Parameters


Returns


setStyle()



Parameters






Parameters




Event Description

click


Details







doubleClick


Details








90/119








keyDown


Details







keyUp


Details







13.5. MapPlotSeries

The MapPlotSeries draws the plot on the map.



alpha Number (0~1)

(default value : 1)




91/119



the user-defined color for the plot.


fillJsFunction , are as follows:



data:Object)





region

filters Array





series disappears.




center point.

interactive Boolean(true)


mouse operation.




for the color.

labelFilters Array












92/119


data:Object)





region

labelPositionField String

It sets the field name of the data provider,

which sets the label location.

The valid values are

―top‖, ‖left‖, ‖right‖, ‖bottom‖ and ‖none‖.










point.





when the user selects or rolls over the plot.



fill RGB It sets the fill color of the plot.





itemRenderer String It sets the plot renderer (CircleItemRenderer,

TriangleItemRenderer, BoxItemRenderer, etc)

labelPosition ―none‖, ‖top‖, ―bottom‖, It sets the label location.

93/119



stroke RGB It sets the color of the line of the plot.




addEventListener()



Parameters



clearStyle()



Parameters


getStyle()



Parameters


Returns


setStyle()



Parameters













94/119




Parameters




Event Description

click


Details







doubleClick


Details










keyDown


Details





95/119




keyUp


Details







13.6. MapPanelSeries

The MapPanelSeries component draws the panel on the map.



alpha Number (0~1)

(default value : 1)




bodyColor RGB It sets the color of the content of the panel.

bodyTextField String It sets the field name of dataProvider for

the content of the panel.



to return the user-defined color for the title

of the panel.





data:Object)


96/119




region

filters Array









center point.



mouse operation.




for the color.

panelWidth Number

It sets the panel width.

If it is not defined, then the panel size will

be determined by the text size.

panelHeight Number

It sets the panel height.

If it is not defined, then the panel size will

be determined by the text size.

selectedCircle Boolean(true) Whether or not to use the circle mark for

the selected region.

selectedFill RGB It sets the color of the circle mark.



showHeader Boolean (true) Whether or not to display the header.


titleField String It sets the field name of dataProvider for

the title of the panel.

titleJsFunction Function


to return the user-defined title of the panel.


titleJsFunction are as follows:

97/119

function titleJsFunction (seriesId:String,


data:Object)





region







point.


wordWrap Boolean (false) Whether or not to wrap the text on the

panel.





backgroundFill RGB It sets the background color of the panel.

(default : white)


cornerRadius Number (4) It sets the corner radius of the panel.


fill RGB It sets the color of the title of the panel.





headerHeight Number

It sets the height of the panel header.

You can define the headerHeight attribute

when the itemRenderer attribute is set to

―VPanelItemRenderer‖.

98/119

headerWidth Number

It sets the width of the panel header.

You can define the headerWidth attribute

when the itemRenderer attribute is set to

―HPanelItemRenderer‖.

horizontalAlign ―center‖, ―left‖, ―right‖

(default value : left)

It sets the horizontal alignment of the panel.

itemRenderer String It sets the renderer of the panel.

(VPanelItemRenderer, PanelItemRenderer, etc)

paddingBottom Number

(default value : 3)

It sets the space between the bottom end of

the panel and the bottom end of the content

area by pixel.

paddingTop Number

(default value : 3)

It sets the space between the top end of the

panel and the top end of the content area by

pixel.

paddingLeft Number

(default value : 5)

It sets the space between the left end of the

panel and the left end of the content area by

pixel.

paddingRight Number

(default value : 5)

It sets the space between the right end of the

panel and the right end of the content area

by pixel.

stroke RGB It sets the border line of the panel.


titleStyleName String It sets the style of the title of the panel.

verticalAlign ―middle‖, ―top‖, ―bottom‖

(default value : top)

It sets the vertical alignment of the panel.



addEventListener()



Parameters



clearStyle() function clearStyle(styleProp:String):*




99/119


Parameters


getStyle()



Parameters


Returns


setStyle()



Parameters






Parameters




Event Description

click


Details













100/119



doubleClick


Details










keyDown


Details







keyUp


Details







13.7. MapRouteSeries

The MapRouteSeries component draws the route (connecting line) between the regions.


101/119


alpha Number (0~1)

(default value : 1)




curveField String It sets the field name for the inclination of

the curved line (route).

dashed Boolean (false) Whether or not to display the dashed line

for the route.



to return the user-defined color for the title

of the panel.





data:Object)





region

filters Array




fromCodeField String It sets the field name for the beginning

point of the route.

fromHCenterGapField String It sets the field name for the horizontal gap

of the beginning point of the route.

fromVCenterGapField String It sets the field name for the vertical gap of

the beginning point of the route.

id String It sets the Series ID of the route.



mouse operation.



102/119


for the color.

labelField String It sets the field name for the label to be

displayed on the route.

labelHCenterGapField String It sets the field name for the horizontal gap

of of the label.

labelVCenterGapField String It sets the field name for the vertical gap of

of the label.

lineColor RGB It sets the color of the route.

marker middle, end It sets the location of the arrow mark

( middle, end )

rollOverColor RGB It sets the color of the route when the user

rolls over the route.

rotateField string It sets the field name which has the

rotation value of the image.



toCodeField String It sets the field name for the end point of

the route.

toHCenterGapField String It sets the field name for the horizontal gap

of the end point of the route.

toVCenterGapField String It sets the field name for the vertical gap of

the end point of the route.




visible Boolean(true) Whether or not to make it visible.

weight Int It sets the line thickness of the route.




fill RGB It sets the color of the title of the panel.




103/119




addEventListener()



Parameters



clearStyle()



Parameters


getStyle()



Parameters


Returns


setStyle()



Parameters






Parameters












104/119




Event Description

click


Details







doubleClick


Details










keyDown


Details







keyUp This event occurs when the user releases the key.

105/119

Details







13.8. MapSparkSeries

The MapSparkSeries component draws the spark chart on the map.



click String (null) It sets the call back function for the mouse

click.

columnWidthRatio Number (0.8) It sets the space ratio of the column width.

defaultColors KoolSpark.defualtColors It sets the default colors.

fill RGB It sets the background color.

firstValueFill RGB It sets the color for the first value.

firstValueStroke RGB It sets the border color of the first value.

gutterBottom Int (0) It sets the bottom space.

gutterLeft Int (0) It sets the left space.

gutterRight Int (0) It sets the right space.

gutterTop Int (0) It sets the top space.

horizontalAxisInvert Boolean (false) Whether or not to display the reverse order

of the X-axis.

horizontalAxisMaximum Int (null) It sets the maximum value of the X-axis.

horizontalAxisMinimum Int (null) It sets the minimum value of the X-axis.

itemColor RGB (#000000) It sets the item color used in itemRenderer.

itemRenderer CircleItemRenderer It sets the size and color of the circle.

lastValueFill RGB It sets the color for the last value.

lastValueStroke RGB It sets the border color of the last value.

lineStroke RGB It sets the line color.

lineWidth RGB It sets the line thickness of the chart.

maxValueFill RGB It sets the fill color for the maximum value.

maxValueStroke RGB It sets the line color for the maximum

106/119

value.

minusValueFill RGB It sets the fill color for the negative values.

minusValueStroke RGB It sets the border color for the negative

values.

minValueFill RGB It sets the fill color for the minimum value.

minValueStroke RGB It sets the line color for the minimum value.

radius Int(3) It sets the radius of the item.

showAllValue Boolean (false) Whether or not to display all items.

showFirstValue Boolean (false) Whether or not to display the first item.

showLastValue Boolean (false) Whether or not to display the last item.

showMaxValue Boolean (false) Whether or not to display the maximum-

valued item.

showMinusValue Boolean (false) Whether or not to display the item of

negative values

showMinValue Boolean (false) Whether or not to display the minimum-

valued item.

showToolTip Boolean (false) Whether or not to display tooltips

showZeroAxis Boolean (false) Whether or not to display 0 on the axis.

startAngle Int (0) It sets the starting angle of the pie chart.

stroke RGB It sets the border line of all items.

targetValue Int (null) It sets the target value.

targetValueColor RGB It sets the color for the target value.

targetValueRatio Number (0.8) It sets the ratio of the target value over the

chart width.

targetValueStroke RGB It sets the line of the target value.

targetValueWidth Number (2) It sets the width of the target value.

toolTipFunction String (null) It sets the JavaScript function to be called

to return the user-defined tooltips.

verticalAxisMaximum Int (null) It sets the maximum value of the Y-axis

(N/A : winloss, pie)

verticalAxisMinimum Int (null) It sets the minimum value of the Y-axis

(N/A : winloss, pie)

winLossValue Int (0) It sets the base value for the WinLoss chart.

zeroAxisStroke RGB It sets the color of the 0-axis.

zeroAxisStrokeWidth RGB It sets the thickness of the 0-axis.


107/119



fill RGB It sets the background color of the image.





labelPosition

―none‖, ‖top‖, ―bottom‖,




stroke RGB It sets the color of the border line of the

image.




addEventListener()



Parameters



clearStyle()



Parameters


getStyle()



Parameters

- styleProp:String the style value

Returns








108/119

- *: the style name

setStyle()



Parameters






Parameters




Event Description

click


Details







doubleClick


Details












109/119



keyDown


Details







keyUp


Details







13.9. MapDivSeries

The MapDivSeries component draws the <DIV> element on the map.



click String (null) It sets the call back function for the mouse

click.

id String It sets the ID of MapDivSeries

mdivWidth Number(30) It sets the width of MapDivSeries

mdivHeight Number(30) It sets the height of MapDivSeries

customSeriesFunction String It sets the JavaScript function which

returns the HTML element.



which has the value for the horizontal

moving.

110/119



which has the value for the vertical

moving.



addEventListener()



Parameters



clearStyle()



Parameters


getStyle()



Parameters

- styleProp:String the style value

Returns

- *: the style name

setStyle()



Parameters



removeEventListener() function removeEventListener(type:String, listener:Function):void












111/119


Parameters




Event Description

click


Details







doubleClick


Details










keyDown


Details






112/119


keyUp


Details







13.10. Legend

The Legend component represents the legend of the chart.



direction Horizontal|vertical(vertical) It sets the display direction of the item of

legend.

backgroundColor RGB It sets the background color.

borderStyle ―none‖,‖solid‖,‖inset‖,‖outset‖

(inset)

It sets the style of the border line.






horizontalGap Number It sets the horizontal space between two

items.

labelPlacement right|left|top|bottom (right) It sets the label location over the marker of

legend.

markerHeight Number It sets the height of the marker.

markerWidth Number It sets the width of the marker.

paddingBottom Number It sets the bottom space.

paddingTop Number It sets the top space.

paddingLeft Number It sets the left space.

paddingRight Number It sets the right space.

useVisibleCheck Boolean(false) Whether or not to display the check box to

113/119

select the visible items.

verticalGap Number It sets the vertical space between two

items.

13.11. LegendItem

The LegendItem component draws the items of legend.



label String It sets the label of legend.

fill IFill It sets the color of the item.

The SolidColor object is used.







items.

labelPlacement right|left|top|bottom (right) It sets the label location over the marker of

legend.





verticalGap Number It sets the vertical space between two items.

13.12. SubLegend

The SubLegend component represents the user-defined legend.



114/119

direction Horizontal|vertical (vertical) It sets the display direction of the item of

legend.

backgroundColor RGB It sets the background color.

borderStyle ―none‖,‖solid‖,‖inset‖,‖outset‖

(inset)

It sets the style of the border line.







items.

labelPlacement right|left|top|bottom(right) It sets the label location over the marker of

legend.



paddingBottom Number It sets the bottom space.

paddingTop Number It sets the top space.



verticalGap Number It sets the vertical space between two

items.

13.13. SolidColor

The SolidColor component represents the solid color.



alpha Number (0~1)

(default value : 1)


color RGB It sets the color.

13.14. LinearGradient

The LinearGradient component represents the linear gradient.

115/119



angle Number It sets the transition angle of the color.

13.15. RadialGradient

The RadialGradient component represents the radial gradient.



angle Number It sets the transition angle of the color.

focalPointRatio Number It sets the center point of the circle.

valid range : -1.0 ~ 1.0

13.16. GradientEntry

The GradientEntry component represents the individual color of LinearGradient or RadialGradient.



alpha Number (0~1)

(default value : 1)


color RGB It sets the color.

ratio Number It sets the beginning point of the color.

valid range : 0.0 ~ 1.0

13.17. MapCrossHair

The MapCrossHair draws crosshairs on the map.

116/119



crossHairEnabled Boolean (true) Whether or not to display crosshairs on the

map.

horizontalLabelFormatter Formatter

It sets the formatter for the label to be

displayed horizontally if the

showValueLabels attribute is ―true‖.

horizontalLabelPlacement ―left‖, ―right‖

(default value : left)

It sets the location of the label to be

displayed horizontally if the

showValueLabels attribute is ―true‖.

mouseWheelEnabled Boolean (true) Whether or not to zoom in / out when the

user wheels the mouse.

showAreaLabels Boolean (true) Whether or not to display the coordinates

of the region the mouse is currently over.

showValueLabels Boolean (true) Whether or not to display the coordinates

of the map the mouse is currently over.

stopClickEvent Boolean (false)

Whether or not to propagate the event

when the user clicks the mouse: the click

event will not be fired in the map chart, and

will be fired within MapCrossHair.

stopMouseMoveEvent Boolean (false)

Whether or not to propagate the event

when the user moves the mouse: the move

event will not be fired in the map chart, and

will be fired within MapCrossHair.



verticalLabelFormatter Formatter

It sets the formatter for the label to be

displayed vertically if the showValueLabels

attribute is ―true‖.

verticalLabelPlacement ―top‖, ―bottom‖

(default value : bottom)

It sets the location of the label to be

displayed vertically if the showValueLabels

attribute is ―true‖.

13.18. MapNavigator

The MapNavigator component draws the map navigator on the chart.

117/119



mouseWheelEnabled Boolean (true) Whether or not to zoom in / out when the

user wheels the mouse.

showNavigateControls Boolean (true) Whether or not to display the control for

the map move.

showZoomControls Boolean (true) Whether or not to display the control for

zooming.

14. Notice of Implementing KoolMap

14.1. Not Supported Functions

The following functions are not supported in KoolMap for HTML5.

HTML tags and New-Line in the user-defined function ( e.g. DatatipFunction, etc)

: As HTML tags are not supported in SVG text, HTML tags and the New-Line character (\n)

cannot be used in the user-defined function.

If there is depth in the map, the tooltips of the first depth will not be displayed in mobile

browsers.

: If there is a submap and when the user touches the screen, then it will lead the user to the

submap, so the user will not be able to see the tooltips of the touched map.

MapCrossHair in mobile browsers

: As the touchmove event is not woking with SVG, the CrossHairs feature is not working

with mobile browsers.

As IE9, Safari and the default browser of Android are not supporting filter, the filter components,

such as DropShadow, GlowFilter, are not working with those browsers.

14.2. Chart Resizing

The size of the map chart is determined by the size of the DIV in which the chart is created. If you want

the chart to be resized automatically with the web browser, then the size of <HTML> and <BODY> must

be 100%, and the value of the size of the DIV in which the chart is created must be set as a percentage

value.

118/119

Please find the sample HTML code below.

html{

height:100%;

}

body{

height:100%;

}

// Creates the map chart.

// Parameters:







<!—The DIV in which the chart is created -->

<div id="mapHolder" style="width:100%; height:100%;">

</div>

In the above sample code, there is only one ancestor <DIV> of the chart, the ID of which is ―mapHolder‖.

But for the case when there are multiple ancestor <DIV>s, the value of the size of all its ancestor <DIV>s

must be set as a percentage value.

.

If you want to resize the chart by clicking a button in the page, then you need to change the value of the

size of the DIV in which the chart is created, and then call the function, resize(), when the user clicks the

button.

Please find the sample HTML code below.

119/119

function changeChart(w,h){

var ch = document.getElementById("mapHolder") // get the DIV in which the chart is created

ch.style.width = w+"px"; // width = w (by pixel)

ch.style.height = h+"px"; // height = h (by pixel)

document.getElementById("map1").resize(); // resize the chart

}

14.3. Using Desktop / Mobile

Please be noticed the following restrictions when you use KoolMap in different browsers and devices.

The smoothness of the effect in mobile browsers may vary depending on hardware.

The smoothness of the effect in some desktop browsers, Firefox, Safari, Chrome may vary

depending on hardware.

Android phone and Safari browser are not supporting the filter effects ( Shadow, Glow ).

Documents

RiaMore Soft - Koolchart · 2016-06-15 · 9.0+ 3.0+ 3.0+ 4.0+ 3.2+ IOS7+ 3.0+ 1.3. KoolMap System Configuration < Figure 1 Data Transmission between Server and Client > Layout,