Google Fusion Tables API

Fusion Tables map styling - what are your options?

Kathryn Hurley, Developer Programs Engineer, Fusion Tables
August 2011

Fusion Tables offers two map feature styling options: styling via the Fusion Tables API and styling via the Google Maps API. It might not be clear what the differences are. This article hopes to clarify each option and give you an idea of when you might want to use one over the other.

Quick Comparison

Here's a quick comparison of the two styling options. Each condition will be explained in more detail throughout the article.

Condition Styling via Fusion Tables API Styling via Google Maps API
You own the table X X
You don't own the table Discover how the table is styled Apply your own style to the table
Different styles for multiple columns in a single table   X
Style saved in Fusion Tables X  
Dynamic styling via JavaScript   X
Consistent styles across multiple tables X  

Styling via the Fusion Tables API

At Google I/O 2011, Fusion Tables announced the release of Fusion Tables map feature styling via the Fusion Tables API. This was an exciting announcement, since it gives you even more control over their tables via the API. But what is styling via the Fusion Tables API and how would you use it?

What is it?

Styling via the Fusion Tables API gives you programmatic access to one or more styles for a given table. The styles are saved in Fusion Tables. They can be retrieved, inserted, updated and deleted via the Fusion Tables API. The marker, line or polygon styles are updated programmatically by making RESTful HTTP calls and sending the appropriate style data.

Styles are represented as JSON objects. The isDefaultForTable field determines which style is applied to the features on the map (assuming that no dynamic styles are being set using the Google Maps API - more about this later). Here is an example of the styles for table 1296453:

{
 "kind": "fusiontables#styleSettingList",
 "items": [
  {
   "kind": "fusiontables#styleSetting",
   "tableId": "1296453",
   "styleId": 1,
   "isDefaultForTable": true,
   "markerOptions": {
    "iconStyler": {
     "kind": "buckets",
     "columnName": "Bad Feeling",
     "buckets": [
      {
       "min": 0.0,
       "max": 1.0,
       "icon": "small_red"
      },
      {
       "min": 1.0,
       "max": 2.0,
       "icon": "small_yellow"
      },
      {
       "min": 2.0,
       "max": 3.0,
       "icon": "small_blue"
      }
     ]
    }
   }
  },
  {
   "kind": "fusiontables#styleSetting",
   "tableId": "1296453",
   "styleId": 2,
   "polygonOptions": {
    "fillColorStyler": {
     "kind": "gradient",
     "columnName": "Num Movies",
     "gradient": {
      "min": 1.0,
      "max": 6.0,
      "colors": [
       {
        "color": "#23819c",
        "opacity": 0.5
       },
       {
        "color": "#2dc800",
        "opacity": 0.5
       },
       {
        "color": "#f7de00",
        "opacity": 0.5
       }
      ]
     }
    }
   }
  }
 ]
}

There are 2 styles for the table. The first defines 3 buckets for the marker icons based on the values in the Bad Feeling column. This is the default style for the table, since the isDefaultForTable field is set to true. The second style defines a gradient for the fill color of the polygons based on the values in the Num Movies column.

Here is the resulting map:

Why would you want to use it?

  • Styling via the API comes in handy when programmatically creating tables. For example, let's say you've written a script to create 100 tables and want to apply a style to each. In the past, you would have to manually update the styles via the Fusion Tables web application. You can now update the styles programmatically, which makes the process much quicker.
  • When applying styles to multiple tables, styling via the Fusion Tables API also makes it easy to apply a consistent style to each table, since the style can be reused throughout your code.
  • Another interesting use is to discover how public tables are styled. You can retrieve the styles for any public table by issuing an HTTP GET request.

Styling via the Google Maps API

At Google I/O, Fusion Tables also announced the release of Fusion Tables styling via the Google Maps API. This gives you more options for styling the features in yours and others Fusion Tables, all using JavaScript code! But what does this really mean and why would you use it?

What is it?

Styling via the Google Maps API gives you the ability to set styles for the features in a table via JavaScript. The styles are not saved in Fusion Tables but are dynamically applied to the features when the map is generated.

Styles are applied to the the Fusion Table using the styles parameter of the FusionTablesLayerOptions object that is passed to the FusionTablesLayer. The styles parameter allows you to define different styles for markers, polygons, and lines based on an optional filter. For example, here's an example of a style for table 1296453:

styles: [{
  where: "'Num Movies' < 4",
  polygonOptions: {
    fillColor: "#FF6600",
    strokeColor: "#FFFFFF",
    strokeWeight: 2
  }
}, {
  where: "'Num Movies' >= 4",
  polygonOptions: {
    fillColor: "#00CCCC",
    strokeColor: "#FFFFFF",
    strokeWeight: 3
  }
}]

The code divides the data in the Num Movies column into 2 buckets and sets the style of the polygons accordingly.

Since the style is defined in JavaScript, the style can be updated dynamically when a user interacts with a page. Here's an example with a range selector that changes the value in the filter:


Notice also that these styles override the styles that were set using the Fusion Tables API.

Why would you want to use it?

  • The styles are dynamic, which means the map styles can be changed based user interactions with your website. For example, you can add a slider that changes the threshold of a bucket, which in turn changes the style of the features on the map.
  • Styling via the Maps API also works great if your table has multiple columns on which you'd like to style your map. Since the styles are dynamic, you can change the filter in the styles object using any of the columns in your table.
  • Styling via the Maps API gives you the opportunity to style other people's maps using your own style.

Summary

To summarize, here's the comparison table again that differentiates the two styling options to help you find which works best for you:

Condition Styling via Fusion Tables API Styling via Google Maps API
You own the table X X
You don't own the table Discover how the table is styled Apply your own style to the table
Different styles for multiple columns in a single table   X
Style saved in Fusion Tables X  
Dynamic styling via JavaScript   X
Consistent styles across multiple tables X  

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.