Fusion Tables Workshop

originally created for Where 2.0, 2011. Updated Jan 2012.

Fusion Tables is a modern data management web application making it easy to host, manage, collaborate on, visualize, and publish data tables online. Follow the steps below to upload your own data to Fusion Tables and create a map!

Merge tables

Now that you have the Bay Area population data in Fusion Tables, we're going to merge with a table containing the zip code boundaries. Fusion Tables has special handling for KML (Keyhole Markup Language) that is used to represent geographical features such as points, lines and polygons / boundaries. The table containing zip code boundaries has two columns we are interested in: one for the zip code labeled "name" and one labeled "geometry" where each cell has KML for the corresponding boundary. We can use these boundaries to represent the locations when they are put on the map, otherwise they will only be points on the map.

Select the columns you want to merge on. Make sure the radio button next to Zip is selected in the left column, and select the radio button next to name in the right column. These columns both have zip codes in the same format. Merge works by looking for exact string matches in the selected columns and then linking matching rows together.

Enter a table name for your merged table in the text box next to Save as a new table named. Suggested name: Bay Area Population merged with KML.

Click Merge tables.

Select Visualize > Map. You may initially see "data loading" messages. Wait a minute and zoom in or refresh to see the correct images.

Click on one of the polygons on the map to see what is displayed in the InfoWindow.

Configure the InfoWindow

Now let's customize the content in the InfoWindow.

Click on Configure info window.

Deselect all checkboxes except for the 2 next to Zip and Population. Notice how the HTML in the right panel is updated as you do this.

Select the Custom tab.

Update the HTML to the following:<div class='googft-info-window' style='font-family: sans-serif'><b>{Zip}</b><br><b>Population:</b> {Population}</div>

Click Save.

Click on one of the zip code boundaries. The InfoWindow content should be similar to the following:

94403Population: 37919

Styling

Now add some styling to the map to create an interesting visualization of the data.

Click Configure styles.

Select Fill color under Polygons in the left column.

Select the Gradient tab.

Select the radio button next to Show a gradient.

In the drop-down menu next to Column, select Population.

In the text box next to Through, enter the number 90900.

Select any colors you want in the drop-down menus or keep the default.

Click Save when done.

The map will be updated with the new style.

Sharing and Permissions

New tables are automatically set to Private. The visibility needs to be changed to Unlisted or Public to embed in a web page.

Click the Share button in the top right corner.

Select the radio button next to Unlisted or Public. The visibility will be updated immediately on selection.

Close the window.

Embedding a Fusion Tables Map Visualization in an HTML page

As an alternative to viewing a map in the Fusion Tables application, it is possible to embed a view of a Fusion Table based map visualization in an HTML page.

Open the embedded_map.html file using a Text Editor (please ensure Rich Text Format is off). This file is in the zip file you downloaded at the beginning of this tutorial.

Go to Map visualization page for the example create above (if you have closed the window, find the table in your docs list at docs.google.com, reopen it and click on Visualize -> Map)

Click on "Get embeddable link". You should see the following (your table id will be different):

Select the text in the box "<iframe...........</iframe>". Copy the text.

Go to the embedded_map.html text editor and paste the select text below the line "<h1>Bay Area Population with Embedded Map</h1>". The file should now look like:

Save the file and open it in a browser. You should now see:

Advanced: Using the Google Maps API FusionTablesLayer to Display the map

A more advanced way of embedding a Fusion Tables map into a web page is to use the Fusion Table layer in Google MAPs API. This requires some experience with javascript but has the advantage of allowing you to take advantage of all the features of Google MAPs API.

First, find the Table ID for your table. You can do this by:

Selecting File > About. The Table ID is the value next to NumericID:.

Open the map.html file using a Text Editor (please ensure Rich Text Format is off). This file is in the zip file you downloaded at the beginning of this tutorial.

Find the line that reads:

var tableid = XXXXXX;

Replace the XXXXXX with your Table ID.

Review the code. The code creates a new Map and a FusionTablesLayer to display on the Map.

Save your updates.

Open the map.html file in a browser. You should see your Fusion Table data on the map.

Now, update the query sent to the Fusion Table Layer to include a filter. To do so add the "where" clause below, just after line 40 as follows:

query: {

select: 'geometry',

from: tableid,

where: 'Population > 40000'

},

Useful tools

Here are a couple useful tools that will help you work with Fusion Tables: