Using CFX_mapData to create the image


General Example: 
<!--- Create a query to get data --->
<CFQUERY NAME="USMap" DATASOURCE="mapData">
  SELECT color, persons
  FROM UnitedStates INNER JOIN census ON census.Code = UnitedStates.Code
</CFQUERY>

<!--- Get the local directory path --->
<CFSET localDirectory	= getDirectoryFromPath(GetBaseTemplatePath())>

<!--- Create the image --->
<CFX_mapData QUERY="USMap"
  MAPFILE="#localDirectory#states.gif"
	OUTFILE="#localDirectory#statesCensus.gif"
  DATACOLUMN="persons"
  COLORCOLUMN="color"
  COLORLIST="FFFFC0,C0C000,800000"
  STEP="1500000"
  NBSTEPS="20">
	
<!--- display the image --->
<IMG SRC="statesCensus.gif" WIDTH="470" HEIGHT="330" BORDER="0" ALT="">

The colors used for each state will be calculated by linear interpolation between FFFFC0 and C0C000 for the lower half of the range of values, and between C0C000 and 800000 for the upper half. (see this example).

Generating the key for the map

A key with the scale of all colors used and the associated range of values can be generated using the custom tag CF_mapKey. This tag uses a subset of the attributes used by CFX_mapData, and they must have the same values.
Example: 
<CF_mapKey
  MINVALUE="0"
  COLORLIST="FFFFC0,C0C000,800000"
  STEP="1500000"
  NBSTEPS="20">
CF_mapKey returns a three columns query of NBSTEPS rows:
keycolor contains the color used for the current range of values.
fromValue is the lower value of the current range.
toValue is the upper value of the current range.
This query can be used to generate a table showing all the colors used in the map: 
<TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0" STYLE="margin:5px;">
  <TD COLSPAN="2" WIDTH="175"><CENTER><B>Total Population of states</B></CENTER></TD>
  <CFOUTPUT QUERY="mapKey">
  <TR><TD CLASS="keyColor" BGCOLOR="#keycolor#"> </TD>
    <TD CLASS="keyValue" WIDTH="160">#fromValue# to #toValue#</TD></TR>
  </CFOUTPUT>
</TABLE>

Complete example

(see the complete example) 
<!--- Generate a query for colors in the key --->
<CF_mapKey
    MINVALUE="0"
    STEP="1500000"
    NBSTEPS="20"
    COLORLIST="FFFFC0,C0C000,800000">
<head>
  <title>Total Population of States</title>
<STYLE>
  TD.keyColor {
    border : 1px solid #000000;
    width : 15px;
    height:10px;
    font-size:4px;
  }
  TD.keyValue {
    font-family : Arial, Helvetica, sans-serif;
    font-size : 12px;
    height : 10px;
  }
</STYLE>
</head>
<body>
<CENTER>
<H3>Total Population of States</H3>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="3" WIDTH="625">
<CFOUTPUT>

<!--- Display the map --->
  <TR><TD WIDTH="470"><IMG SRC="statesCensus.gif" WIDTH="470" HEIGHT="330" BORDER="0" ALT=""></TD>
  <TD VALIGN="top" WIDTH="175">
  <TABLE BORDER="0" CELLSPACING="2" CELLPADDING="0" STYLE="margin:5px;">
    <TR><TH COLSPAN="2" WIDTH="175">Population</TH></TR>
</CFOUTPUT>

<!--- Display the key --->
<CFOUTPUT QUERY="mapKey">
<TR><TD CLASS="keyColor" BGCOLOR="#keyColor#"> </TD>
  <TD CLASS="keyValue" WIDTH="160">#fromValue# to #toValue#</TD></TR>
</CFOUTPUT>
</TABLE>
</TD>
</TR>
</TABLE>

Use of COLORLIST attribute

The ColorList attribute is used to define a color range in which colors must be interpolated for each step of the scale. In simpler cases, only two colors are required, the first is for the lower bound, the second the higher bound of the valu range. But if more complex inbetween colors are wanted, one can give as many different colors as needed. Here are a few examples:

Use of NULLCOLOR attribute

This attribute may be used with CFX_dataMap when the query may contain somme null values (empty strings). The tag will then use this color specified for nulls in the attribute. See this map for instance. Note that the CF_mapKey tag does not accept this attribute. You must include the code to show this value by yourself, either before, either after the loop for other values.

Non linear scales

The use of attributes MINVALUE, STEP and NBSTEP will produce intermediate values in a linear scale. In some situations however, a non linear scale can be prefered. Just use the attribute SCALELIST instead of the three above, and supply your own intemediate values. In the wind velocity example, this scale list is: "0,2.5,5,7.5,10,12.5,15,20,25,30,40,50,60" starting with 2.5 MPH increments, then 5, and finally 10. 
<CFX_mapData QUERY="USWeatherMap"
  MAPFILE="#localDirectory#states.gif"
	OUTFILE="#localDirectory#windStates.gif"
  DATACOLUMN="wind"
  COLORCOLUMN="color"
  COLORLIST="FFFFC0,FFFF00,00FF00,FF0000"
  SCALELIST="0,2.5,5,7.5,10,12.5,15,20,25,30,40,50,60">