Big data visualization with Google Geo

Mano Marks, Senior Developer Advocate, Google

Introduction

The First Google Maps Mashup

A Partial List of Geo at Google

Google Earth, Earth Pro, Earth Server
Google Maps
Google Earth API
Google Maps API - JavaScript, Flash, Static, Webservices, Android, iPhone
Google Earth on Android and iPhone
Google Earth Builder
Google Earth Engine
Google Fusion Tables
Google Latitude
Google SketchUp
Google Places
Google Street View
Data APIs - Picasa, Panoramio, Youtube...
Freebase...

Google Geo APIs Landscape

Google Maps API on over 600K websites
Over 800 Million downloads of Google Earth
Over 1 Billion KML files on the web
Google Maps API most used mashup platform in the world

Source: Google

Agenda

Big Data Visualization
Tile Overlays
Flash Maps API
KML Layers
Fusion Tables
Google Earth Builder

Limitations on maps

Browsers are slow
Overlays are big

Solution 1: Tile Overlays

Source: http://maps.huge.info

Solution 2: Flash Maps API

Source: http://www.tricedesigns.com/

Solution 3: KML Layers

KmlLayer object

Place KML file on a server
Create KmlLayer object in Maps API application
Google Servers parse KML file
Google Servers return clickable overlay to map
KmlFeatureData gives access to data on click

KmlLayer Code Sample

var kmlLayer = new 
    google.maps.KmlLayer('http://earthquake.usgs....',

var options = {
    suppressInfoWindows:true
  }
  }
  
kmlLayer.setMap(map, );

google.maps.event.addListener(kmlLayer, 'click', 
    function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInDiv(text);
  });

Solution 4: Fusion Tables

Fusion Tables

Mapping without code

Better mapping with code

Mapping without code

sample table

Features

Generates clickable raster
100MB upload, 250MB per Google Account
100K rows in a layer
Easy user interface

Better mapping with code

Integration with Maps API
Direct access through easy Fusion Tables API
Spatial queries

Radius
Bounding Box
Nearest Neighbor

New Styling launched at I/O

Fusion Tables dynamic querying

Source: http://project.wnyc.org/

...      var australia = new google.maps.LatLng(-25, 133);
      map = ...
      layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'geometry',
          from: '815230'
        },
        styles: [{
          polygonOptions: {
            fillColor: "#00FF00",
            fillOpacity: 0.3
          }
        }, {
          where: "birds > 300",
          polygonOptions: {
            fillColor: "#0000FF"
          }
        }, {
          where: "population > 5",
          ...});
      layer.setMap(map);