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){
   ...