Integrate and Display Chart FX Maps.

If you are a developer trying to display numerical data on a map or simply calling out positions on a map using lat,lon coordinates, Chart FX Maps is the perfect solution because it lets you download thousands of prebuilt US and world maps for quick integration into your web based, desktop and mobile applications using jChartFX Plus or Chart FX 8.

In essence, Chart FX Maps are provided as .cmf files that can display numerical data by coloring map shapes or by displaying other annotation elements such as pins, bubbles, charts and even polygons.

If you are using jChartFX Plus you must know Chart FX maps require the following external .js files before you can use the Chart FX maps API:

<script src="Scripts/jchartfx.coreVector.js"></script>
<script src="Scripts/jchartfx.advanced.js"></script>
<script src="Scripts/jchartfx.data.js"></script>
<script src="Scripts/jchartfx.maps.js"></script>

The following is a sample shows how to load a Chart FX map file (.cmf) and define a set of conditional attributes that will determine the color of different shapes in the map according their data value using javascript and JChartFX Plus:

//This code assumes you would have already created a target container in your html page for the map called div1.
chart1 = new cfx.Chart();
map = new cfx.Maps.Map();
map.on("loaded", onMapLoaded);
map.setPath("CAZipCodes3.cmf");
chart1.setGalleryAttributes(map);
addCondition(chart1, 0, 5000, "#A1DBB2", "#DDDDDD", null);
addCondition(chart1, 5001, 10000, "#FEE5AD", "#DDDDDD", null);
addCondition(chart1, 10001, 50000, "#FACA66", "#DDDDDD", null);

chart1.create(div1);
function addCondition(chart1, from, to, color, borderColor, title) {
	var condAttr = new cfx.ConditionalAttributes();
	condAttr.getCondition().setFrom(from);
	condAttr.getCondition().setTo(to);
	condAttr.setColor(color);
	condAttr.getBorder().setColor(borderColor);
	if (title == null)
	   title = from + " - " + to;
	condAttr.setText(title);
	chart1.getConditionalAttributes().add(condAttr);
}

Please note that because the .cmf file is loaded within a <SCRIPT> tag, your browser may implement same-origin policies that prevents it from navigating a local file system and the map may not display when testing the page locally by loading it as file://URL. If this is your case, you may try moving your html page to a server location or using a different browser to test the page, we have successfully loaded map files locally using Internet Explorer, Safari and Firefox, while we have experience some problems with this policy using Chrome.