Chapter 10 — Overlaying Statistical Data 187
var newlng = lngpoints[0] + ((lngpoints[lngpoints.length-1] - ;
lngpoints[0])/2);
var newpoint = new GPoint(parseFloat(newlng),parseFloat(newlat));var idealspan = new GSize ;
(parseFloat((Math.abs(lngpoints[lngpoints.length-1]-
lngpoints[0]))*1.25),
parseFloat ;
((Math.abs(latpoints[latpoints.length-1]-
latpoints[0]))*1.25));map.zoomTo(idealzoom);for(var i=1;i<16;i++) {
var currentsize = map.getSpanLatLng();
if ((currentsize.width < idealspan.width) ||
(currentsize.height < idealspan.height)) {
map.zoomTo(i);
idealzoom = i;
}
else {
break;
}
}map.centerAndZoom(newpoint,idealzoom);
}
JavaScript treats more or less all values as text, even if the values are numerical. This can happen
even in some logical and comparison operations and calculations. To force a numerical compari-
son (as in the sort()on the array of points) you have to trick JavaScript into performing a
numerical comparison by explicitly defining the sort comparison function (x-y). See the Mozilla
JavaScript guide (http://developer.mozilla.org/en/docs/Core_JavaScript_
1.5_Reference) for more information.
Most JavaScript and Google Maps implementations even perform the span and zoom calcula-
tion without redisplaying the intervening zoom levels, making the process feel instantaneous.
Using it in this application ensures that all the markers for each city on the map are displayed
simultaneously.
The Basic Non-Statistical Map
You can see the result of the basic marker map and the recentering of the map onto the array of
points in Figure 10-1.
You can see the basic map is exactly that, a basic representation of the list of cities. Now the
map can be extended to incorporate the statistical data of the individual city population.
The basic example is available at http://maps.mcslp.com/examples/ch10-01.html.