« « How to combine multiple Fusion Tables into one map

Thoughts on starting a new adventure » »

How to make a non-Flash intensity map in Fusion Tables

Posted by on Aug 21, 2011 in Blog, Uncategorized | 17 Comments

I’ve recently become very, very intimately acquainted with the advanced innards of Google Fusion Tables in a very unhealthy way. You think I’m joking, but I’m not. One of the coolest visualizations Fusion Tables (I’ll say FT from this point forward) is capable of would be its Intensity Map option. Automatically pull in the shapes of various countries or states, match up a certain number (population, incidents of something, etc.) with a range of colors, and color in those shapes according to that number. A light green Washington state has less incidents of something than a dark green New Jersey, for example. This is cool, but renders in Flash. There’s a time and a place for that technology. Problem is, it doesn’t play well with other FT maps.

In the world of computer-assisted reporting, we’ve talked about the value of merging datasets for a long time. Overlay crime incidents with average income. Is there more crime in poorer areas? And for both analysis and visualization, wouldn’t it be better if we could visually overlay specific points on an intensity map, not just looking at straight text. To make this happen, we have to roll our own intensity map, since we can’t combine the FT-generated Flash ones with FT points visualized as a layer, which is JavaScript-based.

To demonstrate how this might work, we’re going to throw together a nation intensity map divided by state. County is also possible, and I just did it for my final project at PBS. But to keep this example reasonable, we’ll stick to the states. I’ll just be mapping population of states, as a base layer for other data. It comes from the July 2009 count from the Census Bureau. The raw data is here, and my cleaned data is here: Download it to your computer, so we can have a consistent example to work from.

Find a sample completed map here, in my example Fusion Table: http://www.google.com/fusiontables/DataSource?snapid=S242838rYvt

1. Take a look at the Fusion Table Google provides here: http://www.google.com/fusiontables/DataSource?dsrcid=227275. Polygons are stored by Google in the KML (Keyhole Markup Language) format. You just need to put this special type of file into a column in your Fusion Table, and tell the map this is the geography you want to use. The Census Bureau has uploaded a lot of its data in KML format, which you can find by Google searching “kml us counties” or some such. If you go to the visualize map option, you’ll even see all the state’s outlined. Note the ID number at the end of the URL, in this case: “227275″.

2. Prepare your own data. Make sure you have column names, and that your states or counties are formatted like the Fusion Table with geography you were just looking at. For example, their states use full name format, “Alabama”, not “AL”, so you must do the same.

3. When your data is in shape, create a new Fusion Table and upload your data.

4. Go to the Merge menu on the Fusion Table you created. In the upper right, there is a place to enter a table ID. Enter that ID you copied at the end of step 1, in this case, “227275″. Click Get.

5. It will bring in this table’s column as a list to the right side of this selection window. Select “name” as the column you want to join with your table. Select “state” on the left, which is a column from your table that you wish to join. Both of these columns in separate tables should match, i.e. “Alabama” –> “Alabama”. On the right side, click add subset of columns , and uncheck all boxes that aren’t geo. We don’t want to be adding extra columns to our table haphazardly, we just need that geographic info.

6. At the bottom of this form, select a name for a new table, which will combine the data you brought in with the data Google provides. Click “Merge Tables”, and give it a minute or two.

7. Click on visualize Map. You should see a lot of red shapes, that correspond to various states. If this doesn’t work, just above the map is a drop-down menu labeled “Location.” Make sure “geo” is selected, it may be trying to use your state names, unsuccessfully, as opposed to the geographic data we worked so hard to import.

8. Last step is to place an actual intensity in the map. We do this by clicking on “Configure styles” just above the map. Click on “Fill Color” under “Polygon”. You’ll see it defaults to a general red fill color that is under the “Fixed” tab. But we want color variety, so we’re more interested in the other options. To mimic FT’s typical Intensity map function, go to Gradient, and select the bubble that says “Show a gradient.” It defaults to that green, but you can change the color. Adjust the maximum number from “100″ to just above the maximum value you have. With the populations, I choose 35000000 (don’t use commas, even if the number is large). Under select column, choose what number column the map should use to assign colors. Here, we’ll use “population.”

Another option is to choose the buckets tab. Instead of a gradient of one color, we divide the numbers into equal buckets. If we have 5 buckets (the default), the lowest 20% of numbers get the first color, next 20% get the second, etc. You can select the colors of the different buckets, how many buckets you want, and again, you must set an accurate maximum number.

9. Now, you can embed this more flexible intensity map, just by grabbing a link the way you would with any FT map. If you want to overlay with points, create the points as a map in a separate table, and follow my previous tutorial on creating an embeddable map with multiple layers.

« « How to combine multiple Fusion Tables into one map

Thoughts on starting a new adventure » »
  • Anonymous

    Michelle,

    It works like a charm, but is there a way to customize the dialog box? The balloon is still too big. In my case, I did a similar one yesterday, with the proportion of religion followers state by state in Brazil. The balloon that got opened, for a state name and a couple digits, was the same size as if I had used a whole paragraph of text. Do you know how to customize it?

    Best,

    Marcelo.

    [Reply]

    Michelle Minkoff Reply:

    When you are creating your custom HTML for the infobubble, surround all your text with a div. Specify the height with inline CSS, and it should shrink to the height you specify. Ex: Followers of a religion: 22

    [Reply]

  • Anonymous

    Hi, Michelle!
    Do you know if it’s possible to post a google maps api on google blogger or google sites? I know that I can do that using fusion tables but if I want to use the fusion tables layer builder I’m not being able to post the html code in my blog. I’ve been talking to Kathrin from FT team and she thinks it isn’t possible. But after searching a lot on internet, I discovered that maybe it’s possible if I change the template HTML of my blog, although I haven’t success in my atempts.
    I hope you can help me!

    Thanks,
    Daniel

    [Reply]

    Michelle Minkoff Reply:

    It’s difficult, but can work if you wrap your JavaScript code in a Google Gadget. Follow the steps in this comment, but replace its content with your own that you got off of the layer builder. http://www.google.com/support/forum/p/sites/thread?tid=7d31c9ceaa70faec&hl=en

    I haven’t tested this myself, as I don’t use Google Sites, but it looks like this may work.

    The bottom line is that I don’t believe you can insert JavaScript (which makes stuff “go interactive” on the Web) into Google Sites. So, you need to wrap the code in something. The Gadget mentioned above is one way. Another idea is to host it on other space on the Interweb, and then iframe it in (http://www.w3schools.com/tags/tag_iframe.asp)

    Without making too much of this, this issue is a great reason to get into hosting your own website. More responsibility, but a bit more freedom.

    [Reply]

    Michelle Minkoff Reply:

    It’s difficult, but can work if you wrap your JavaScript code in a Google Gadget.  Follow the steps in this comment, but replace its content with your own that you got off of the layer builder. http://www.google.com/support/forum/p/sites/thread?tid=7d31c9ceaa70faec&hl=en

    I haven’t tested this myself, as I don’t use Google Sites, but it looks like this may work. 

    The bottom line is that I don’t believe you can insert JavaScript (which makes stuff “go interactive” on the Web) into Google Sites.  So, you need to wrap the code in something.  The Gadget mentioned above is one way.  Another idea is to host it on other space on the Interweb, and then iframe it in –http://www.w3schools.com/tags/tag_iframe.asp

    Without making too much of this, this issue is a great reason to get into hosting your own website.  More responsibility, but a bit more freedom.

    [Reply]

    Anonymous Reply:

    This link  http://www.google.com/support/… that you sent to me just opens the help page from google brazil. There isn’t any specific gadget on it. Could you please send me other link or the name of the gadget?

    Thanks a lot!
    Daniel

    [Reply]

    Michelle Minkoff Reply:

    Let’s see if this link displays properly…

    http://www.google.com/support/forum/p/sites/thread?tid=7d31c9ceaa70faec&hl=en

    Michelle Minkoff Reply:

    Okay, that seemed to work.  It’s not a link to a gadget, but instructions on how to make your own gadget, which you can then embed in a page.  That example allows you to embed a Twitter feed, but you would just replace the content section with your code from the layer builder.  Email me at meminkoff@gmail.com if this still isn’t working for you…

    Kathryn Hurley Reply:

    This does work. Here’s the full instructions (based off the directions found here http://www.google.com/support/forum/p/sites/thread?tid=7d31c9ceaa70faec&hl=en):1) Copy the XML below and paste it in Notepad or some other text editor.2) Copy and paste your FTL Builder code between  (the XML below already has some FTL Builder code between these lines – that code can be deleted).3) Save the file4) Click on the “More Actions” button at the top right of your Google Site, then click on “Manage Site”5) On left nav bar, click on “Attachments”6) Click “Upload” and upload the XML file 7) On the uploaded file, right click on “download,” and click on “Copy Link Address” or whatever gets the file location8) Go to the page you want to add the file and click “Edit Page” 9) Find the spot you want the file, then click “Insert” at the upper left, and all the way at the bottom click “More Gadgets”10) Click “Add Gadget by URL” and paste the URL of your XML file you uploaded in step #7

    // COPY XML BELOW

    <![CDATA[  #map_canvas { width: 500px; height: 400px; }var map;var layer;var tableid = 222171;function initialize() {  map = new google.maps.Map(document.getElementById('map_canvas'), {    center: new google.maps.LatLng(37.26968150969718, -122.200927734375),    zoom: 8,    mapTypeId: google.maps.MapTypeId.ROADMAP  });  layer = new google.maps.FusionTablesLayer(tableid);  layer.setQuery("SELECT 'Location' FROM " + tableid);  layer.setMap(map);}function changeMap() {  var searchString = document.getElementById('searchString').value.replace("'", "\'");  layer.setQuery("SELECT 'Location' FROM " + tableid + " WHERE 'Name' CONTAINS IGNORING CASE '" + searchString + "'");}  Name     ]]>

    [Reply]

    Michelle Minkoff Reply:

    Thanks so much for helping out, Kathryn.

    Kathryn Hurley Reply:

    You figured it out; so, thank you! :)

    Here’s a link to a better formatted set of instructions:

    http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/embed_google_site.html

    Anonymous Reply:

    To me is not working right yet. The map itsefl is not apearing, only the markers. But if I zoom in or out, then the map apear but the markers fade. When I stop zooming the markers apear again and the map disappear once more.

    Anonymous Reply:

    Okay! Now it’s working!

    Thanks a lot, Michelle and Kathrin!

  • http://michelleminkoff.com Michelle Minkoff

    It’s difficult, but can work if you wrap your JavaScript code in a Google Gadget.  Follow the steps in this comment, but replace its content with your own that you got off of the layer builder.  http://www.google.com/support/forum/p/sites/thread?tid=7d31c9ceaa70faec&hl=en

    I haven’t tested this myself, as I don’t use Google Sites, but it looks like this may work. 

    The bottom line is that I don’t believe you can insert JavaScript (which makes stuff “go interactive” on the Web) into Google Sites.  So, you need to wrap the code in something.  The Gadget mentioned above is one way.  Another idea is to host it on other space on the Interweb, and then iframe it in (http://www.w3schools.com/tags/tag_iframe.asp)

    Without making too much of this, this issue is a great reason to get into hosting your own website.  More responsibility, but a bit more freedom.

    [Reply]

  • Pingback: Answering some FAQs about Fusion Tables « Michelle Minkoff

  • Albertgian55

    Hello, 
    I can’t upload the Gadget.. 
    This is the error: 
    Unsupported feature: org.apache.shindig.common.xml.XmlException: The element type “meta” must be terminated by the matching end-tag “”. At: (1325,5)

    [Reply]

  • Suranjan Mistry

    Hello,
    How to display more then five layer on my google map api.

    [Reply]