GEOG 863
GIS Mashups for Geospatial Professionals

Improving Your User Interface Using jQuery

PrintPrint

In this part of the lesson, we're going to return to working with the Google Maps API and focus on improving the user interface.  We'll see how to gain greater control over the page layout and how to turn the plain HTML table in our sidebar into one that provides additional functionality (e.g., the ability to sort).  To accomplish this, we're going to use the popular jQuery JavaScript framework (actually an extension to jQuery called jQuery EasyUI).  

Learn More

Before incorporating jQuery into our pages, I recommend you return to the w3schools site to get a quick jQuery crash course.  The entire tutorial is worth checking out, but in the interest of time I recommend working through only the following pages:

  • All of the topics under the jQuery Tutorial heading,
  • Only the jQuery Chaining topic under jQuery Effects,
  • All of the jQuery HTML topics,
  • All of the jQuery AJAX topics.

Getting jQuery/jQuery EasyUI

One of the earlier pages in the w3schools tutorial discussed two different ways of incorporating jQuery into your web pages: downloading it and hosting it on your web server, or including it from a CDN (content delivery network) like Google.  I'm going to suggest including it from a CDN, especially in this course, so that you have less files to worry about putting in place on your own machine for testing and on the PSU web server when you're ready to post your assignment.  As we'll see, this simply involves adding the following script element to the page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

The jQuery EasyUI extension, on the other hand, is not hosted on a CDN to my knowledge, so we will download it.

  1. Navigate to the jQuery EasyUI download page.
  2. Click on the Download button under the GPL Edition heading and save the zip file to your machine.
  3. Unzip the file to a logical folder for doing your development work.  Keep in mind that you'll want to replicate your local folder setup in your space on the web server.

Setting the page layout

  1. Begin by navigating to the jQuery EasyUI documentation page.
  2. In the navigation pane on the left side of the page, click on the layout link under the Layout heading.
  3. Read over the Layout page, in particular noting the five regions that content can be placed in, the syntax used to define regions on a page, and some of the properties that can be set for each region.
  4. As the starting point for our coding, use the source code of this page from an earlier lesson.
  5. In the head section of the document, add the following references to jQuery and Easy UI:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-easyui/jquery.easyui.min.js"></script>
			 
  6. Above the existing style settings, add a reference to the Easy UI CSS file:
    <link rel="stylesheet" type="text/css" href="../jquery-easyui/themes/default/easyui.css">
  7. Change the body start tag to the following:
    <body class="easyui-layout">

  8. Replace the existing map div with these two divs, one placing the map in the center region and another creating a sidebar in the east region:

    <div id="map" data-options="region:'center',split:true"></div>
<div data-options="region:'east',split:true" title="Cities" style="width:230px;"></div>

  9. Save your document and test it out in a browser.  (Consult this working example, if necessary.)  Note that the sidebar (empty currently) can be resized or collapsed.

Adding a data grid

To insert a list of city features into the empty sidebar, we'll follow many of the same steps we took earlier in the course.

  1. Below the set of existing global variables, add a new variable to store the array of markers:

    var markers;
  2. At the top of initMap(), initialize that variable to a new empty array:

    markers = [];
  3. Add a function to handle clicks on the sidebar links:

    function myclick(num) {
  google.maps.event.trigger(markers[num], "click");
}
  4. Within the createMarker() function, add the newly created marker to the markers array:

    markers.push(marker);

    Now we'll begin adding code that takes advantage of jQuery Easy UI.
  5. Inside the empty east region div, add the following:

    <table id="sidebar" class="easyui-datagrid" rownumbers="true" sortName="city" 
  sortOrder="asc" remoteSort="false" striped="true" singleSelect="true">
  <thead>
    <tr>
      <th field="city" sortable="true">City</th>
      <th field="pop" sortable="true">Population</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

    This HTML markup creates an empty table with sortable fields named city and pop.  Other important steps taken here include assigning the table an id and setting its class to easyui-datagrid.  Note also the various optional properties set.  Explanations for each of these can be found by clicking on the datagrid link under the DataGrid and Tree heading in the Easy UI documentation.
  6. Next, add a function to be used for adding a new row to the datagrid:

    function addToSidebar(name, pop, i) {
  var lastRow = $('<tr/>').appendTo($("#sidebar").find('tbody:last'));
  lastRow.append( $('<td><a href="javascript:myclick(' + i + ')">' + name + 
    '</a></td>') );
  lastRow.append($('<td/>').text(pop));  
}

    This function is set up to accept the name of the city, its population, and its unique position within the array of shapefile features.  Then using jQuery syntax, it creates a new empty tr element, appends it to the tbody element and stores a reference to the tr element in the lastRow variable.  On the next line, a td element containing a link that triggers the opening of the associated marker's info window is appended to the tr element in lastRow.  Finally, the last line appends a td element containing the city's population. 
  7. Within the render() function, add the following code just after the call to createMarker():

    addToSidebar(name,pop,i);

    This invokes the function created in the previous step, passing in the values associated with the shapefile feature currently being processed by the loop.
  8. The last step is to actually turn the plain table into a datagrid.  Add the following line to the end of the render() function (after the loop that processes the shapefile's records):

    $('#sidebar').datagrid();
  9. Again, save your document and test it in a browser.  (Consult this working example, if necessary.)

Now that you've seen how a JavaScript framework like jQuery can be used to improve your Google API-based web maps, let's go further into the topic of user interface development by looking at HTML forms.