Some time while I wasn't paying attention, Google posted a neat new map gadget to the visualization gallery. It is called "Geomap", and it is the same map gadget used in the Google Analytics web portal. The documentation page is listed at the end of this article.
This gadget also shows up in iGoogle with the name: "Value Map". If you type that in the "search for gadgets" box, it should come up as the first entry (don't search for or use "Geomap" as this finds a non-Google gadget). The gadget renders using Flash, which means no iPhone/iPad support. But where that is not an issue, this gadget provides the best tool for area and point based data mashups. And that's what I'll be demonstrating in this article - both using the iGoogle Gadget and the Visualization API gadget.
Previously, the "Heat Map" was the only Google map gadget. It is image-based and therefore still has its role (eg, on thos iPads). But the Heat Map gadget could only do thematic (region) maps, and only understood a limited region repertoire. The Value Map supports more data regions and also more display view regions (around a hundred).
The data format section of the reference page shows that the gadget supports two formats. Format 1 takes Latitude/Longitude locations and is used in conjunction with setting the Data Display property to "Markers" (or dataMode="markers" in the visualization API). Format 2 takes a region name or code (ISO-3166-2 or MSA) and is used in conjunction with setting the Data Display property to "Regions" (or dataMode="regions" in the visualization API).
The Google Analytics data feed can return metrics segmented either by lat/long or by region, and ShufflePoint queries can be constructed to create the appropriate JSON results. For example, this query:
SELECT METRICS ga:pageviews ON COLUMNS DIMENSIONS ga:latitude, ga:longitude ON ROWS TOP 200 BY ga:pageviews DESC FROM default WHERE TIMEFRAME default
will return data in Data Format 1.
Marker map in iGoogle
To get these results into an iGoogle map, you would do the following:
- login to ShufflePoint and launch the Query Tool
- paste the query into the "Query" tab and click "Get results"
- change to the "Feeds" tab, select "Google Gadgets (JSON)" in the drop-down, and click "Generate"
- click "Copy" to copy the feed url into your clipboard
Now on iGoogle, add the "Value Map" gadget, put the cursor into the required "Data source url" field, and paste from the clipboard. Give it a title, set the Map to "World" and the Data Display to "Markers" and click "Save". After a few moments, you should see the world map with markers representing pageviews in the top 200 locations.
In Marker mode, the circular marks have both their size and color controlled by the corresponding value - in this case pageviews.
Region map in iGoogle
The region map iGoogle example uses a query which selects the dimension sp:countryCode instead of latitude and longitude. Generate the data feed URL in the Query Tool as before. In the iGoogle settings, specify "Regions" for the Data Display. An example of the resulting display is shown below.
Marker map in web page
I created a sample which runs a query and draws a map using the Javascript Visualization API. This was basically a copy-paste exercise from previous examples show in our blog. View source on the sample to see the code. Note that the "geomap" package is loaded and also note that the dataMode option is set to "markers". When you run this example, you'll observe that the mouseover shows latitude and longitude. This is because the result set returned by the query only has three columns. To get a fourth label column, I modified the query to be:
SELECT
METRICS ga:pageviews ON COLUMNS
DIMENSIONS ga:latitude, ga:longitude, ga:region, ga:city ON ROWS
TOP 200 BY ga:pageviews DESC
FROM default
WHERE
TIMEFRAME default
However, I cannot feed this result directly into the gadget. First I need to manipulate the returned data table and concatenate region into the last column of the table. This is accomplished in the second sample. View source to see the Javascript involved, which is a common pattern I used when manipulating datatables:
- add new column
- iterate rows and create a derived value to put in new column
- remove original columns
The live sample can be seen here.
Region map in web page
To the complete the series, I created a region map using the visualization API. Much the same code as in the marker example but as in the iGoogle example, the query now selects sp:regionCode rather than latitude and longitude.
I noticed in reviewing the reference page that the geomap visualization gadget supports user interaction. You can register a region click handler. The handler gets an even which includes a region property so you can take some action based upon what region was clicked. In my sample, I take the action of "zooming in" on the selected region by running a new query specific to that region and refreshing the display with the returned result table. I only implemented US clicks in my sample. This gadget also supports the display of a "zoom out" button. I set showZoomOut to "true" and registered a handler which reruns the original world-level query.
The live sample can be seen here.
Summary
I am glad that a customer recently asked me what we can do with maps. It resulted in my going to have a look at the current Google gadget offerings, and I am pleased that the new stuff is fairly powerful and yet still easy to use. There are some additional map settings I didn't have time to try, such as setting the color scale for the data display. I expect that Google will over time add additional capabilities and settings to the map gadget. On my wish list would be the ability to present pie charts instead of single-value markers.
Live samples
References
Visualization: Geomap
http://code.google.com/apis/visualization/documentation/gallery/geomap.html
