For digital journalists creating interactive maps using Google Fusion tables, a common complaint that Google has not addressed is that the map does not come with an embedded legend. Here’s a simple workaround to add a customized legend to your map.
Alert: Google has updated Fusion Tables maps and legend is now a build-in feature. Check this tutorial for a step-by-step guide on how to create a demo interactive map (with legend).
Why is an embedded legend desirable?
For a Google Fusion tables map, Google automatically generates embedding codes for embedding the map in a web page or a blog post. However, the embedded map does not come with a legend. Take a look at the map below, where I plotted the median household income by county in New Jersey.
With a few mouse clicks, a visitor to this map can figure out that darker colors mean higher incomes; but it really helps if there’s a customized legend that provides a quick overview of the distribution of income brackets.
3 steps to embed a legend in map and in WordPress blog post
1. Embed the map into a web page with a legend
We will create a web page that contains both the map and the legend. With some online search, I found a ready-made template to do just that. The template, which contains the sample in this post, can be downloaded here.
You need to open the template in an HTML editor such as Dreamweaver or Notepad, and make some changes based on your need. If the HTML codes look formidable to you – the only part you need to tweak is a small portion of it:
For the sample in this post, here are the edits I made to this portion of the codes:
- tableId: 4161507 is the id number of my Google Fusion tables map
- locationColumn: ‘geometry’ is the column in my Google Fusion map that contains location information for the county boundary
- legendTitle: ‘median household income’ is a title that I want show up at the top of the legend box
- divide the income range into 6 buckets and pick a color shade for each bucket – you can choose to use any number of bucket by deleting/adding the part contained between the two curly brackets
2. publish the page to a web server
For this part, you need to have access to a domain or website where you can store the edited template. I published mine to www.mulinblog.com, my personal website, as a regular web page which contains only the map (with the legend). You can take a look of the published map page.
If all you need is a standalone webpage with the map/legend, the job is done. You can continue to make changes or add other contents to your published page as needed.
3. embed the published page into a blog post
If you need to embed the web page (with map/legend) into a blog post, you need to tweak some other simple codes. I wrote a separate post on how to embed any web page in a WordPress blog post.
If everything is done right, the Google Fusion tables map with legend should appear in a blog post looking similar to the one below:
- Embed video and photo in Google maps: A beginner’s guide
- infogr.am vs. Google Fusion Tables: A comparison
- Improvements made to the free data visualization tool, infogr.am
- Comparing two data visualization tools: Tableau Public and Infogr.am
- Timeline tools for news reporting have rooms for improvements