Task 10:  
Now that you verified that the map displays the correct sales data for the territories, you can focus on adding functionality and visual interest to the map. Perform the following tasks in this section:
*
*
*
*
You specify formatting attributes by editing the XML string you typed in the previous task.
Display sales values in a more readable format
In this procedure, format the sales value so that it displays $4.52M instead of 4,520,712.27999999. Also, specify that the sales values appear on the map in the following format:
EU: $4.52M
1  
2  
3  
4  
In the line that defines the XML (the line that begins with "<map>), add the text shown in bold. You must type the entire XML string in a single line.
"<map decimals='2' formatNumberScale='1' numberPrefix='$' includeValueInLabels='1' labelSepChar=': '><data>" + g_dataPart + "</data></map>"
For information about these attributes, see the “XML Attributes” topic in the Flash map help.
5  
6  
7  
Building the XML string in readable pieces
As you add attributes, the XML string becomes increasingly difficult to type and read as a single line in the expression builder. This procedure shows how to build the XML string piece by piece.
1  
2  
Edit the dataXML expression in the expression builder. Replace the line that defines the XML string (the line that begins with "<map>) with the following lines:
var str = "<map "
//Format sales numbers
str += "decimals='2' formatNumberScale='1' numberPrefix='$'"
 
//Display sales numbers in the map
str += "includeValueInLabels='1' labelSepChar=': '"
str += ">"
 
//Define data
str += "<data>" + g_dataPart + "</data>"
str += "</map>"
The str variable stores the XML string. The += operator adds each successive piece of string to the current string. By building the XML string in pieces, you can read, edit, delete, and add attributes easily. As the example shows, you can also add comments about the purpose of the attributes.
3  
4  
Preview the report to ensure that the map displays correctly. The expression builder’s validation does not verify that the XML string contains valid content.
Change the colors used in the map
In this procedure, change the fill and background colors of the map. Use Hex codes for the color values.
1  
2  
//Colors in map
str += "fillColor='DDDDDD' bgColor='FFFFDC'"
3  
Define data ranges and apply different colors to each range
In this procedure, categorize the sales data into the following ranges, and apply a different color to each range:
0 - 1000000, Below target
1000001 - 4000000, Within target
4000001 - 8000000, Above target
1  
2  
Edit the dataXML expression in the expression builder. Add the following lines after the str += ">" line. Each str line must be a single line.
//Create data ranges
str += "<colorRange> "
str += "<color minValue='0' maxValue='1000000' displayValue='Below target' color='CCFF99' />"
str += "<color minValue='1000001' maxValue='4000000' displayValue='Within target' color='66CCFF' />"
str += "<color minValue='4000001' maxValue='8000000' displayValue='Above target' color='FFDDFF' />"
str += "</colorRange>"
3  
Create city markers
In this procedure, display markers for these cities in which there are sales offices: New York, Paris, San Francisco, and Tokyo. To display markers, define the properties of each marker, including a user-specified ID, its XY position, the label to display, and the position of the label relative to the marker. You can also specify the shape, size, and color of each marker. After defining the markers, create the list of markers to display on the map.
1  
2  
Edit the dataXML expression in the expression builder. Add the following lines after the data range definition, that is, after the str += "</colorRange>" line. Each str line must be a single line.
// Define city markers
str += "<markers>"
str += " <definition>"
str += "<marker id='NYC' x='210' y='140' label='New York' labelPos='bottom' />"
str += "<marker id='PAR' x='360' y='130' label='Paris' labelPos='bottom' />"
str += "<marker id='TOK' x='630' y='160' label='Tokyo' labelPos='right' />"
str += "<marker id='SFO' x='80' y='163' label='San Francisco' labelPos='left' />"
str += "</definition>"
 
//Specify the shape, size, and color of the markers
str += "<shapes>"
str += "<shape id='TOKdot' type='circle' radius='3' fillColor='ffd700' labelPadding='+1' /> "
str += "<shape id='PARdot' type='circle' radius='3' fillColor='ffd700' labelPadding='-2' /> "
str += "<shape id='NYCdot' type='circle' radius='3' fillColor='ffd700' labelPadding='+1' /> "
str += "<shape id='SFOdot' type='circle' radius='3' fillColor='ffd700' labelPadding='+1' /> "
str += "</shapes>"
 
//Specify which markers to display
str += "<application>"
str += "<marker id='TOK' shapeId='TOKdot' />"
str += "<marker id='NYC' shapeId='NYCdot' />"
str += "<marker id='PAR' shapeId='PARdot' />"
str += "<marker id='SFO' shapeId='SFOdot' />"
str += "</application>"
str += "</markers>"
3  
The map should look like the one shown in Figure 18-20. The territories with sales data appear in different colors. A legend displaying the data range colors and labels appears on the right. The map displays circular markers and labels for San Francisco, New York, Paris, and Tokyo.
Figure 18-20  
This tutorial demonstrates only a few of the attributes that you can use to format and manipulate a Flash map. For a complete list and descriptions of the attributes, see the Flash map help.

Additional Links:

Copyright Actuate Corporation 2012