Session Info

Title: Managing and Visualizing your Geospatial Data with Fusion Tables

Hashtags: #io2011 #Geo

Feedback: http://goo.gl/79Lvg

Managing and Visualizing your
Geospatial Data with Fusion Tables

Kathryn Hurley, James McGill
Guest Speaker: Simon Rogers, Guardian Datablog
May 10, 2011

Agenda

• Intro to Fusion Tables
• Quick Demo
• Building an Application with Fusion Tables
• Google Maps API & Fusion Tables
• Simon Rogers, Guardian Datablog

Intro to Fusion Tables

Intro to Fusion Tables

A database in the cloud used to store and visualize your data

* Source: Guardian "Deprivation mapped: how you show the poorest (and richest) places in England"

Another example visualization - Google Visualization API

Using Google Chart Tools to Create Interactive Dashboards
May 10, 02:30PM – 03:30PM / Room 1

Quick Demo

Quick Demo

• "Merge" (aka Left Outer Join)
• Permissions and Visibility
• Create a Map
  • Custom InfoWindow
  • Apply a Style

Building an Application with Fusion Tables

Application ideas..

• Newspapers around the world
• Server connections for MMORPG
• Dashboard for Sales Operations
• Mapping store locations
• Crowd sourcing for potholes

Application workflow - Mapping Newpapers Around the World

API Details

SQL API Details

• REST API
• SQL Queries

CREATE TABLE newspapers (name: STRING, location: LOCATION, link: STRING)

INSERT INTO 123456 (name, location, link) VALUES ('NYT', 'New York', 'nyt.com')

SELECT * FROM 123456 WHERE name = 'NYT'

UPDATE 123456 SET location = 'New York, NY' WHERE ROWID = '301'

• OAuth for authorization

Sample Code*

query = 'CREATE TABLE newspapers (name: STRING, location: LOCATION, link: STRING)'
  
headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
}

serv_req = urllib2.Request(
  url='https://www.google.com/fusiontables/api/query',
  data=urllib.urlencode({'sql': query}),
  headers=headers)

//returns tableid if successful
tableid = urllib2.urlopen(serv_req)

*Authorization steps omitted

API Demo

New Features

New API Features!

• Map Feature Styling
• Info Window Customization

Now launching to trusted testers

How to be a trusted tester

How do these new features work?

• REST API
• JSON objects represent styles and templates

{
  ...
  "tableId": 12345,
  "markerOptions": {
    "iconName": "small-blue"
  }
  ...
}
      	

Why is this awesome?

• Great if you're creating lots of tables
  
• Find out how public tables are styled
• Part of the Google APIs Console
• Google supported client libraries, makes OAuth easier

Trusted Testers needed!

Google Maps API & Fusion Tables

Mapping your data

var layer = new FusionTablesLayer({
  select: 'column',
  from: 200949,
});
layer.setMap(map);

Adding conditions

var layer = new FusionTablesLayer({
  select: 'column',
  from: 12345,
  where: "Age > 50"
}); 

Why use FusionTablesLayer?

Customizing behaviour

var layer = new FusionTablesLayer({
  query: {
    select: 'column',
    from: 12345,
  },
  suppressInfoWindows: true
});

google.maps.event.addListener(layer, 'click', doSomethingCool);

Performance

Add a little Style

Styling syntax

var layer = new FusionTablesLayer({
  query: {
    select: 'geometry',
    from: 815230,
  },
  styles: [{
    polygonOptions: {
      fillColor: "#00FF00"
    }
  }]
}); 

Restricting styles

var layer = new FusionTablesLayer({
  ...
    {
      where: "bird_species > 300",
      polygonOptions: {
        fillColor: "#0000FF"
      }
    }]
}); 

Cascading styles

var layer = new FusionTablesLayer({
  ...
    {
      where: "population > 5", /* People per km² */
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
}); 

Dynamically updating

  var newStyle = {
    where: 'plant_species > 1000',
    polygonOptions: {
      fillColor: "#FF0000"
    }
  };

  function updateStyle() {
    // Replace one existing style.
    var oldStyles = layer.get('styles'); 
    oldStyles[1] = newStyle; 
    layer.set('style', oldStyles);
  } 

Dynamically updating II

google.maps.event.addDomListener(
  document.getElementById('some_button'),
  'click',
   updateStyle);

Pitfalls

var layer = new FusionTablesLayer({
  query: {
    select: 'column',
    from: 12345,
    where: "bird_species < 100"
  },
  styles: [{
    where: "bird_species > 100",
    polyline: {
      strokeColor: "#FF0000",
    }
  }]
}); 

Other styles

• Polygons
  • Fill color/opacity
  • Outline color/opacity
  • Outline width
• Polylines
  • Line color/opacity
  • Line width
• Markers / Points
  • Icon name (from a predefined set)

Worth noting

• Styles can be applied to any public or unlisted table.
• Up to 5 styles per layer.
• 5 layers per map, 1 of which can be styled.
• Part of the Maps API Experimental Features.
• Check out the reference - live now!

Simon Rogers
Editor, Guardian Datablog

Summary

• New features for trusted testers in the Fusion Tables API:
  • Map Feature Styling
  • Info Window Customization
• New Google Maps API Feature:
  • Dynamic Styling

Links

• Fusion Tables - http://www.google.com/fusiontables
• Fusion Tables API - http://code.google.com/apis/fusiontables
• Google Maps API - http://code.google.com/apis/maps
• Fusion Tables Forum - http://goo.gl/JZGqr
• Twitter - @GoogleFT #io2011 #Geo
• Session Feedback - http://goo.gl/79Lvg
• Trusted Testers - fusion-tables-api-trusted-testers@googlegroups.com

Questions?