//
you're reading...
Data journalism, Data visualisation, How to guides, Mapping

How to make a map with Google Fusion tables

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

  1. Download the zip file here: zip.
  2. 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

  1. Go to Google Docs
  2. If you have not already created a Google account, create a Google account and then sign in
  3. Select Create -> Table (Beta)
  1. Click Choose File.



  1. Browse to find the population.csv file.
  2. Click Next >>.
  3. Click Next >> again.
  4. Update the Table name to Bay Area Population. Add any attribution data and/or change the description.
  5. Click Finish.
  6. 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.

  1. Make sure you have the Population table open in your browser.
  2. In the Population table, select Merge.
  3. Paste the following URL in the Text box under Merge with: https://www.google.com/fusiontables/DataSource?docid=10Py_fhQGH_uPJt9BFHKMWv3Qdg6kbh6dQ_ncAA
  4. Click the Get button.
  5. 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.
  6. 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.
  7. Click Merge tables.
  8. Select Visualize > Map. You may initially see “data loading” messages. Wait a minute and zoom in or refresh to see the correct images.
  9. 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.

  1. Click on Configure info window.
  2. 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.
  3. Select the Custom tab.
  4. 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>
  5. Click Save.
  6. 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.

  1. Click Configure styles.
  2. Select Fill color under Polygons in the left column.
  3. Select the Gradient tab.
  4. Select the radio button next to Show a gradient.
  5. In the drop-down menu next to Column, select Population.
  6. In the text box next to Through, enter the number 90900.

     

  7. Select any colors you want in the drop-down menus or keep the default.
  8. Click Save when done.
  9. 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.
  1. Click the Share button in the top right corner.
  2. Select the radio button next to Unlisted or Public. The visibility will be updated immediately on selection.
  3. 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.
  1. 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.
  2. 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)
  3. Click on “Get embeddable link”. You should see the following (your table id will be different):
  4. Select the text in the box “<iframe………..</iframe>”. Copy the text.
  5. 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:
  6. 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.
    1. First, find the Table ID for your table. You can do this by:
      1. Selecting File > About. The Table ID is the value next to Numeric ID:.
    2. 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.
    3. Find the line that reads:var tableid = XXXXXX;
    4. Replace the XXXXXX with your Table ID.
    5. Review the code. The code creates a new Map and a FusionTablesLayer to display on the Map.
    6. Save your updates.
    7. Open the map.html file in a browser. You should see your Fusion Table data on the map.
    8. 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:
  1. 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!
  2. 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.

Get the original of this post here

About Simon Rogers

Data journalist, writer, speaker. Author of 'Facts are Sacred', from Faber & Faber and a new range of infographics for children books from Candlewick. Edited and launched the Guardian Datablog. Now works for Twitter in San Francisco as Data Editor

Discussion

13 thoughts on “How to make a map with Google Fusion tables

  1. 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.

    Posted by my input | May 21, 2014, 6:47 am
  2. 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

    Posted by A Ascherson | March 25, 2013, 12:39 pm
  3. 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.

    Posted by Simon Rogers | January 27, 2013, 10:30 pm
  4. 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…

    Posted by valleysboy | January 27, 2013, 5:41 pm

Trackbacks/Pingbacks

  1. Pingback: How to create Google Fusion maps that actually look nice | Clara Guibourg - October 14, 2014

  2. Pingback: How to make a map with Google Fusion tables | Simon Rogers | olliesshowcase - June 9, 2014

  3. Pingback: Utforsk.com | Burde brukt Google Fusion Tables oftere - September 27, 2013

  4. Pingback: Données fleuries, une veille hebdomadaire de datajournalisme - February 7, 2013

  5. Pingback: Données fleuries #1 | Data Bloom - February 6, 2013

  6. Pingback: Mapping the census: how we did it (in three steps) « Simon Rogers - February 5, 2013

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 14,754 other followers

%d bloggers like this: