Chapter 10 — Overlaying Statistical Data 195
When parsing the list of years, instead of providing a link to select the dataset to be loaded, the
list will become a key for the colors used to highlight the population data. Meanwhile, the list
of cities will be the method for triggering the population data to be displayed. Generating the
key is a simple case of modifying the year panel information:
for (var i in years) {
yearpanel.innerHTML = yearpanel.innerHTML +
‘<font color=”’ + colors[colorindex] + ‘“>’ + i + ‘
’;
years[i] = colorindex++;
}
Meanwhile, the addgraph()function, now triggered by the movemap()function that is
called when a user clicks the city name in the info panel, is modified to draw multiple circles,
one for each population data point:
function addgraph(city) {
var currentsize = map.getSpanLatLng();
var increment = (parseFloat(currentsize.height)/4.0)/100;
var maxsize = 0;
var graphdata = [];
map.clearOverlays();for(var i in popdata[city]) {
graphdata.push(popdata[city][i]);
if (popdata[city][i] > maxsize) {
maxsize = popdata[city][i];
}
}for(var i=0;i<graphdata.length;i++) {
var pointpair = [];
pointpair.push(points[city]);
var volume = parseInt((parseFloat(graphdata[i])*100)/maxsize);
pointpair.push(new GPoint(points[city].x+increment,
points[city].y+increment));var line = new GPolyline(pointpair,colors[i],volume,0.25);
map.addOverlay(line);
polylines.push(line);
}
}
The important line is the one that constructs the GPolyline()for each population set:
var line = new GPolyline(pointpair,colors[i],volume,0.25);
The last argument specifies the opacity of the line drawn, which is lowered to 25 percent. This
amount will make the information on the map visible while making multiple overlays of the
information recognizable.