Display Annotation Objects In Your Maps

Besides coloring elements in the map, displaying annotation objects such as pins, bubbles, polygons and even charts is a common data visualization technique many developers use in their applications. In essence, placing annotation objects on a map, involves having the lat,lon location where you want to place those elements and using the annotations charting extensions

If you were using javascript and jChartFX Plus to add annotation objects in a map, you must start by adding a reference in your page with the annotations extension:

<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>
<script src="Scripts/jchartfx.annotation.js"></script>

You must then add lat,lon to the data in the map. For simplicity reasons, we are referencing a JSON with only two elements. However, please note you can populate a vast array of lat,lon locations of where to add annotation objects:

var items =[{"County": "Broward","Population": 1780172,"Latitude": 26.146138,"Longitude": -80.452893},{"County": "Orange","Population": 1169107,"Latitude": 28.513955,"Longitude": -81.322127},];
chart1.setDataSource(items);

Once each object contained in the chart has a lat,lon location you can use the annotation extension to attach specific annotation elements at that specific coordinate as follows. In this case we are placing a pin at a specific lat,lon coordinate using a png image:

var ann = new cfx.annotation.Annotations();
var annList = ann.getList(); 
var Values = 0;
var Lat = 0;
var Long = 0;
for (var i = 0; i < chart1.getData().getPoints() ; i++) {
	Values = chart1.getData().getItem(0, i);
	Lat = chart1.getData().getItem(1, i);
	Long = chart1.getData().getItem(2, i);
	var annPicture = new cfx.annotation.AnnotationPicture();
	annPicture.setPicture("Images/Pin.png,32,32");
	annPicture.attach(Long, Lat);
	annList.add(annPicture);
}

There are a wealth of samples provided with jChartFX Plus and Chart FX 8 you can use to get started on placing annotation objects in your maps. So please visit the jChartFX Plus or Chart FX 8 Maps samples section in the respective web site.