Putting it all together

Now, we'll connect the Google Sheets feed with our Mapbox tiles service in our final application.

Parsing the sheets JSON feed

Previously, we parsed the JSON feed with jQuery for each loop to print two attribute values for each element. Now, we'll remap the feed onto an object that we can use to look up data for the geographic objects triggered in UTFGrid. Review the following code, to see how this done:

// Create a data object in public scope to use for mapping
// of JSON data, using id for key
var d = {};

// url variable is set with code from previous section
// url contains public sheet id

$.getJSON(url, function(data) {
  var entry = data.feed.entry;
  var title = '';

  $(entry).each(function(index, value){
    // Column names are name, type, etc.
    $('.results').prepend('<h2>'+this.gsx$name.$t+'</h2><p>'+ this.title.$t +'</p>'+'<p>'+this.gsx$type.$t+'</p>');
    title = this.title.$t;
    $.each(this, function(i, n){
      if(!d[title]){
        d[title] = {};
      }
      d[title][i] = n.$t;
    });
  });

Completing the application

Finally, to complete the application, we need to add the event handler function inside the jQuery AJAX call to the code which handles our feed. This will keep the mapped data variable in a scope relative to the events triggered by the user. The following code is in c7/data/web/utfgrid-mb.html:

<!DOCTYPE html>
<html>
  <head>
  <meta charset=utf-8 />
  <title>A simple map</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
  </head>
  <body>
    <div id='map'></div>
    <script>
      // ID of the Google Spreadsheet
      var spreadsheetID = "1gDPlmvEX0P4raMvTJzcVNT3JVhtL3eK1XjqE7u9u4W4";
      // Mapbox ID
      L.mapbox.accessToken = 'pk.eyJ1IjoiYm1lYXJucyIsImEiOiI1NTJhYWZjNmI5Y2IxNDM5M2M0N2M4NWQyMGQ5YzQyMiJ9.q8-B7BXtuizGRBcnpREeWw';

      var map = L.mapbox.map('map', 'mapbox.streets')
        .setView([39.87240,-75.75367], 15);

      c7tiles = L.mapbox.tileLayer('bmearns.c7').addTo(map);
      c7grid = L.mapbox.gridLayer('bmearns.c7').addTo(map);

      // Setup click handler, Google spreadsheet lookup
      var d = {};
      // Make sure it is public or set to Anyone with link can view
      var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/od6/public/values?alt=json";
      $.getJSON(url, function(data) {

        var entry = data.feed.entry;
        var title = '';

        // loops through each sub object from the data feed using json each function, constructing html from the object properties for click handler
        $(entry).each(function(index, value){
          // Column names are name, type, etc.
          $('.results').prepend('<h2>'+this.gsx$name.$t+'</h2><p>'+ this.title.$t +'</p>'+'<p>'+this.gsx$type.$t+'</p>');
          title = this.title.$t;
          $.each(this, function(i, n){
            if(!d[title]){
              d[title] = {};
            }
            d[title][i] = n.$t;
          });
        });
        // register click handler, displaying html constructed from object properties/loop
        c7grid.on('click', function(e) {
          if (!e.data) return;
          key = e.data.id;
          content = d[key].content 

          //
          var popup = L.popup()
            .setLatLng(e.latLng)
            .setContent(content)
            .openOn(map);
        });
      });

    </script>
  </body>
</html>

After saving this with a .html extension (for example, c7/data/web/utfgrid-mb.html), you can preview the application created using this code by opening the saved file in a web browser. When you do so, you will see something similar to the following image:

Previous Chapter

Interacting with Mapbox services

Next Chapter

Going further – local MBTiles hosting with TileStream

Table of Contents for QGIS: Becoming a GIS Power User

Putting it all together

Parsing the sheets JSON feed

Completing the application

Table of Contents for
QGIS: Becoming a GIS Power User