Chapter 7. Mapping for Enterprises and Communities

In this chapter, we will use a mix of web services to provide an editable collaborative data system.

While the visualization and data viewing capabilities that we've seen so far are a powerful means to reach an audience, we can tap into an audience—whether they are members of our organization, community stakeholders, or simply interested parties out on the web—to contribute improved geometric and attribute data for our geographic objects. In this chapter, you will learn to build a system of web services that provides these capabilities for a university community. As far as editable systems go, this is at the simpler end of things. Using a map server such as GeoServer, you could extend more extensive geometric editing capabilities based on a sophisticated user access management.

In this chapter, we will cover the following topics:

Google Sheets for collaborative data management and services
AJAX for web service processing
OpenStreetMap for collaborative data contribution
MBTiles and UTFGrid data formats
Interactive data hosting through Mapbox
Parsing and mapping JSON to an object
Mixing web service data
Setting up an Ubuntu virtual machine with Vagrant
TileStream for local MBTiles hosting

Google Sheets for data management

Google Sheets provides us with virtually everything we need in a basic data management platform—it is web-based, easily editable through a spreadsheet interface, has fine-grained editing controls and API options, and is consumable through a simple JSON web service—at no cost, in most cases.

Creating a new Google document

To create a new Google document, you'll need to sign up for a Google account at https://accounts.google.com. Perform the following steps:

Create a new Google Sheets document at https://docs.google.com/spreadsheets.
Import data from an Excel file.
1. Navigate to File | Import.
2. Then, navigate to Upload | c7/data/original/building_export.xlsx.

Publishing Google Sheets on the Web

By default, Google Sheets will not be publicly viewable. In addition, no web service feed is exposed. To enable access to our data hosted by Google Sheets from our web application, we must publish the sheet. Perform the following steps:

Navigate to File | Publish to the web.
Copy and paste the URL (which appears after clicking on Published) to a location that you can refer to later (for example, in your favorite text editor).
Select the Automatically republish when changes are made checkbox if it is not already selected, as shown in the following screenshot:

Tip

You'll need the section after d/ (here, it starts with 1xAc8w). This is the unique identifier referring to your sheet (or as it is sometimes known in documentation, the "key").

Previewing JSON

Now that we've published the sheet, our feed is exposed as JSON. We can view the JSON feed by substituting KEY with our spreadsheet unique identifier in a URL of the format https://spreadsheets.google.com/feeds/list/KEY/1/public/basic?alt=json. For example, it would look similar to the following URL:

https://spreadsheets.google.com/feeds/list/1xAc8wpgLgTZpvZmZau20iO1dhA_31ojKSIBmlG6FMzQ/1/public/basic?alt=json

This produces the following JSON response. For brevity, the response has been truncated after the first building object:

{"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$gsx":"http://schemas.google.com/spreadsheets/2006/extended","id":{"$t":"https://spreadsheets.google.com/feeds/list/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/od6/public/basic"},"updated":{"$t":"2012-04-06T13:55:10.774Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#list"}],"title":{"type":"text","$t":"Sheet 1"},"link":[{"rel":"alternate","type":"application/atom+xml","href":"https://docs.google.com/spreadsheets/d/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/pubhtml"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/od6/public/basic"},{"rel":"http://schemas.google.com/g/2005#post","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/od6/public/basic"},{"rel":"self","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/od6/public/basic?alt\u003djson"}],"author":[{"name":{"$t":"Ben.Mearns"},"email":{"$t":"ben.mearns@gmail.com"}}],"openSearch$totalResults":{"$t":"293"},"openSearch$startIndex":{"$t":"1"},"entry":[{"id":{"$t":"https://spreadsheets.google.com/feeds/list/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/od6/public/basic/cokwr"},"updated":{"$t":"2012-04-06T13:55:10.774Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#list"}],"title":{"type":"text","$t":"71219005"},"content":{"type":"text","$t":"udcode: NW92, name: 102 Dallam Rd., type: Housing, address: 102 Dallam Road, _ciyn3: 19716, _ckd7g: 102 Dallam Road 19716, subcampus: WC"},"link":[{"rel":"self","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/19xiRHxZE4jOnVcMDXFx1pPyir4fXVGisWOc8guWTo2A/od6/public/basic/cokwr"}]}, …
]}}

Parsing the JSON data

To work with the JSON data from this web service, we will use jQuery's AJAX capabilities. Using the attributes of the JSON elements, we can take a look at how the data is rendered in HTML as a simple web page.

Starting up the server

Start up SimpleHTTPServer on port 8000 for c7/data/web on the Windows command line using the following commands:

cd c:\packt\c7\data\web
python -m SimpleHTTPServer 8000

Test parsing with jQuery

You can take a look at the following code (on the file system at c7/data/web/gsheet.html) to test our ability to parse the JSON data:

<html>
  <body>
    <div class="results"></div>
  </body>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>

    // ID of the Google Spreadsheet
    var spreadsheetID = "1xAc8wpgLgTZpvZmZau20iO1dhA_31ojKSIBmlG6FMzQ";

    // Make sure it is public or set to Anyone with link can view
    var url = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/1/public/values?alt=json";

    $.getJSON(url, function(data) {

      var entry = data.feed.entry;

      $(entry).each(function(){
        // Column names are name, type, etc.
        $('.results').prepend('<h2>'+this.gsx$name.$t+'</h2><p>'+this.gsx$type.$t+'</p>');
      });

    });

  </script>

You can preview this in a web browser at http://localhost:8000/gsheet.html. You'll see building names followed by types, as shown in the following image:

Rollout

Now let's take look at how we would operationalize this system for collaborative data editing.

Assigning permissions to additional users

In the sheet, click on the blue Share button in the upper-right corner. Alternatively, from Drive, select the file by clicking on it and then click on the icon that looks like a person with a plus sign on it. Ensure that anyone can find and view the document. Finally, add the address of the people you'd like to be able to edit the document and give them edit permissions, as shown in the following screenshot:

The editing workflow

Now that your collaborators have received an invitation to edit the sheet, they just need to sign in with their Google credentials and make a change to the sheet—the changes will be saved automatically. Of course, if they don't have any Google credentials, they'll need to create an account.

To go to the sheet, your collaborator will just need to click on Open in Sheets. The sheet should now also appear under their drive in Shared with me.

Here, you can see the type fields for Christiana Hall, Kirkbride Lecture Hall, and Purnell Hall after the changes are made:

Tip

If you don't require your collaborator to log in with Google, there is always the option of making your document publically editable—although, that comes with its own problems!

The publishing workflow

There is no need for an administrative intervention after the collaborators make changes. Data changed in sheets is automatically republished in the JSON feed, as we selected this option when we published the sheet. If you require more control over the publication of the collaborator edits, you may want to consider unselecting that option and setting up notifications of the changes. This way, you can republish after you've vetted the changes.

You can do a rollback of the changes as needed in the revision history. Perform the following steps:

Go to your sheet.
Navigate to File | See revision history.
You can view all the changes color coded by default, as shown in the following screenshot:
If you click on a particular change, you will have the option to restore the revision made to that point, as shown in the following screenshot:

Viewing the changes in your JSON feed

Go to http://localhost:8000/gsheet.html again to see how the changes to your sheet affected your JSON feed. Note in the following image the changes we made to the type fields for Christiana East Tower, Kirkbride Lecture Hall, and Purnell Hall: