The workshop below was written by Kathryn Hurley at Google and is a brilliant guide to how to get started with Fusion tables.
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!
Topics covered:
Upload data
Merge tables
Configure InfoWindow
Style
Update permissions
Embed Map Visualization in web page
Advanced Topics:
Google Maps API Fusion Tables Layer
Download the Data
- Download the zip file here: zip.
- Unzip. Zip file includes:
- population.csv – Population data for zip codes around the bay area
- embedded_map.html – Basic HTML page
- map.html – Basic HTML page with javascript for using MAPs API
Upload Data to Fusion Tables
- Go to Google Docs
- If you have not already created a Google account, create a Google account and then sign in
- Select Create -> Table (Beta)
- Click Choose File.
- Browse to find the population.csv file.
- Click Next >>.
- Click Next >> again.
- Update the Table name to Bay Area Population. Add any attribution data and/or change the description.
- Click Finish.
- The file will upload to Fusion Tables. Here’s an example of what the table will look like in Fusion Tables:https://www.google.com/fusiontables/DataSource?docid=10Py_fhQGH_uPJt9BFHKMWv3Qdg6kbh6dQ_ncAA
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.
- Make sure you have the Population table open in your browser.
- In the Population table, select Merge.
- Paste the following URL in the Text box under Merge with: https://www.google.com/fusiontables/DataSource?docid=10Py_fhQGH_uPJt9BFHKMWv3Qdg6kbh6dQ_ncAA
- Click the Get button.
- 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
- 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
- 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
- First, find the Table ID for your table. You can do this by:
- Selecting File > About. The Table ID is the value next to Numeric ID:.
- 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’
},
- Shape Escape: http://shpescape.com.Shape Escape allows you to upload shape files to Fusion Tables. Simply go to shpescape.com and select the zipped shape file you want to upload. Shape Escape creates a Fusion Table with the shape file data for you!
- FusionTablesLayer Builder: http://bit.ly/ftlbuilderGoing a few steps beyond the built-in “Get embeddable code” feature, FusionTablesLayer Builder generates all the code necessary to include a Google Map with a Fusion Table Layer on your own website.
Pay for the amount due on your own card to further improve your subprime credit situation. Before writing the content you must have a definite idea concerning the objective.
Hi Simon! I am teaching a data journalism course and was wondering if you got round to posting that list of boundary files? Would be really helpful for making some exercises. Yours, Alex
Hi – did you see this post? https://simonrogers.net/2013/01/28/borders-and-boundaries-16-google-fusion-border-files-for-you-to-use/
I agree with that – but I’ve been thinking about posting my own list (which I’ll do this week). I have a tonne of useful boundary files.
Ill see what I have as well (copyright pending). Excellent guide btw. Simon it would be great to showcase other people/organisations work out there, a monthly picks list prehaps? http://www.cypsp.org/maps-health.html is a good one (nudge nudge 😉 )…..
#shameless
Hi there – that set of geolinks is up now
Why doesn’t Google offer a library of KML files, they have made an incredible amount of boundaries can’t see why they don’t offer them up for grabs to fusion users…
Was thinking that, too. Like, whenever I ask for a town or city or any territory the boundaries always appear properly on Google Maps, so they all got it. There should be a way to just grab it from Maps.