GEOG 865
Cloud and Server GIS

Accessing Fusion Tables via an API

PrintPrint

In this exercise we will consume a Fusion Tables resource using the Google Maps API. API stands for Application Programming Interface and it specifies the programming objects, methods and properties, with which you can build applications. In the case of Google Maps, the API instructs us how to display a map, overlay additional data and graphics, and implement other functionality, such as what to do in response to a mouse-click. You invoke the API using the JavaScript programming language, which is frequently used in web pages.

The Google Maps API is a great example of 'GIS in the Cloud', since most of the processing code and data sources are located on remote servers - all we need to interact with are the commands specified by the API. Additionally, the Google Maps API has the ability to consume other cloud-based services, such as Fusion Tables. Let's take a look at a basic Google Maps API application.

No programming experience is required for this course, so don't worry if you don't understand all the code below. I do encourage you to examine the code and make your best attempt to guess the purpose of each line. Please post questions to the Technical Discussion Forum.

  1. Copy and paste the following code into a text editor, like Notepad:
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
      var midWest = new google.maps.LatLng(41.850033, -87.6500523);
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: midWest,
        zoom: 6,
        mapTypeId: 'roadmap'
      });
    }
    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas"></div>
    </body>
    </html>
  2. Examine the code (again, don't worry if you don't understand it all). Pay special attention to the lines after function initialize(). This code connects to the Google Maps server and uses code and data stored there (in the cloud) to display a map in your browser.  Other parameters in this file customize the map: "center" specifies the lat lon coordinate of the middle of the map view, "zoom" specifies the initial zoom level, and "mapTypeId" specifies that the standard road map is displayed rather than the satellite and topo map options.
  3. Save the file as "GoogleMaps1.html" and open it in your Web browser by double-clicking it.
  4. Verify that you are looking at the standard Google map centered on the Chicago area.
  5. To overlay data from Fusion Tables on this map we need to add only a few lines of code:
     
    layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'Location',
        from: '1078727'
      }
    });
    layer.setMap(map);
  6. These lines create a new FusionTablesLayer (which the Google Maps API know how to handle), using a Fusion Table whose ID is 1078727 (this is the Big Ten table we used earlier), and specify that "Location" is the name of the column containing the geographic feature information.
  7. Insert the new lines of code into your document in the exact location shown below and save it as an updated .html file, called "GoogleMaps2.html".
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
      var midWest = new google.maps.LatLng(41.850033, -87.6500523);
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: midWest,
        zoom: 6,
        mapTypeId: 'roadmap'
      });
    
      layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'Location',
          from: '1078727'
        }
      });
      layer.setMap(map);
    }
    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas"></div>
    </body>
    </html>
  8. Open the new file in your Web browser and you should see the Big Ten location appear on the map.  All of the symbology and settings for the data layer are based on how the data was configured in the Fusion Tables interface.  For example, clicking on the points displays the attribute information as defined in the Fusion Table interface and the symbols used to represent the points were defined by the table's creator as well.
  9. Finally, the API allows us to customize the data's display in our code, rather than relying entirely on the table's configuration defined in the cloud.  We can perform queries to limit the number of features drawn on the map.  Let's visualize only the Big Ten schools with enrollments less than 40,000 students.  We do so by adding one line of code. 
     
    where: 'Enrollment < 40000'
  10. Insert the new line of code in the exact location shown below (and add a comma after the preceding line). Your code should look like what you see below. Save it as a new .html file called "GoogleMaps3.html".
     
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
      var midWest = new google.maps.LatLng(41.850033, -87.6500523);
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: midWest,
        zoom: 6,
        mapTypeId: 'roadmap'
      });
    
      layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'Location',
          from: '1078727',
          where: 'Enrollment < 40000'
        }
      });
      layer.setMap(map);
    }
    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas"></div>
    </body>
    </html>
  11. Open the new file in your Web browser and you should only see five schools appear on the map. (If it doesn't work, make sure you added a comma prior to the line you just pasted, as shown above.) Click the points and confirm that their enrollment values are below 40,000. Other query and customization options are available, and you can explore them if you wish in the Google Maps API documentation.
    By storing our data in the cloud (Google Fusion Tables) we have enabled the capability of consuming the data from other clients (in this case, the Google Maps API). To do so we needed to write only a few lines of code; the bulk of the code that powers Google Maps and the Fusion Tables data runs on Google's servers. Any additional code we may write would be used to implement specialized customizations of the data view, like performing a query as we did above. The cloud-based architecture of these resources makes it possible to deploy and consume maps with this relatively small level of effort.
  12. Take a screen capture of the map you made. You will need it for your deliverables this week.

    To make your map original, you're welcome to experiment with the code to change the query parameters or the initial extent or the map type. Just explain any customizations in your deliverables. If this activity sparks an interest in the Google Maps API and JavaScript programming, you might enjoy Geog 863: GIS Mashups for Geospatial Professionals or Geog 585: Open Web Mapping.