Chapter 10 — Overlaying Statistical Data 203
Using Icon Size to Represent Data
To represent statistical information, you can duplicate the original icon and then alter its size to
represent the volume of the statistic that is being displayed. The map demonstrating this is an
adaptation of the third example, displaying the population for all of the cities when a year is
selected. The modifications to the map application take place in addgraph(), where instead
of drawing a line or circle, the icon is drawn instead. The introductory portion of the functions
remains consistent, although because the icons are measured in pixels, not longitude/latitude,
you no longer have to calculate an increment:
function addgraph(year) {
var maxsize = 0;
var graphdata = [];
map.clearOverlays();polylines = [];
markers = [];
infopanel.innerHTML = ‘’;for(var i=0;i<popdata.length;i++) {
graphdata.push(popdata[i][year]);
if (popdata[i][year] > maxsize) {
maxsize = popdata[i][year];
}
}But the core portion that plots the statistical data is changed. Note how the icon is created. If
you specify an existing icon when creating a new icon object, the new icon inherits all of the
settings of the original. Those values can then be adjusted to create the new icon you want. You
need to do this for each statistical value so that an icon of a different size is created for each
data point.
Any icon parameter can be changed. If you want to use different icons for different elements and
all the icons have the same size, you can just adjust the icon URL. In some cases, even the
shadow can remain consistent.
To achieve this in the application, the icon is copied and then the height and width of the icon
and its shadow are adjusted by multiplying the original value by a multiple of the percentage
that has been calculated. The +1at the end ensures that all the icons are at least the size of the
original markers:
for(var i=0;i<graphdata.length;i++) {
var volume = (parseFloat(parseFloat(graphdata[i])/maxsize)*2)+1;
var thisIcon = new GIcon(baseIcon);