Datasets that include geographic or spatial data (“geodata”) are often much easier to digest on a map. When each data point also includes a measure of size or catchment, it could be helpful to represent the point as a circle on the map, with the radius indicating its relative size.
Here’s an example showing the UK car industry, which was created using the Google Maps API (screenshot):
Source (zip) – all data is fictitious; runs locally in IE
Notice that the circle radius (number of employees) and colour (status) are used to represent different aspects of each car plant.
The body of the HTML is just a single DIV element:
Loading the XML file
We can use jQuery’s .ajax() method to load the XML file, followed by calls to .find() and .each() to iterate over the elements.
I’m loath to explain why we need the toXmlDom() function and conditional logic on $.browser.ie, but bascially IE returns plain text from the .ajax() call, so this needs to be converted to an XML DOM object before using .find().
Close your eyes for a second :-)
Displaying the map
This just involves replacing the DIV in our HTML body with a “map” object.
The tricky bit here is getting the initial latitude/longitude and zoom right – sites like www.getlatlon.com will give you a start.
Looking up a postcode
For simplicity, the XML file refers to UK postcodes. Since the Google Maps API doesn’t include suitable geocoding support (licensing issues), we need to call another service first to get the respective Lat/Long co-ordinates.
Notice that .ajax() method again, which simplifies the asynchronous HTTP request to www.geopostcode.corg.uk. By default, the results of the AJAX call are cached by the browser.
Drawing a circle
This is done in two stages: create a Marker, then draw a Circle which is bound to its position (read the full API).
The Marker and Circle are both google.maps.MVCObject instances, so their values can be tied together using bindTo(). So, for example, setting draggable:true on the Marker would mean that the Circle would follow it around the map.
I suggest you download the source code and see how it all hangs together.