CSC220 Google Maps

From CSclasswiki
Jump to: navigation, search

Team Rain: Google Maps Project

Objective

We will utilize the Google Maps API to display KML track data. The tracks can be displayed on a web page using a Google Maps applet. JQuery and AJAX commands allow for a user to view tracks based on demographic data such as the major and year of the student creating the track. A checklist can be used to display multiple tracks at the same time.

Team Rain Project Page Team Rain Project Presentation

Team Members

Julia Burch and Kristjan Mets

Goals and Outline

  • We aim to have a working web page that allows users to access our project's KML data and display it using Google Maps.
    • The web page will run a Google Maps app.
    • The web page will access the project database.
    • The user will select a category from a list of demographic variables (Major, School Year, etc.)
    • The list will send a query to the project database and create a second list of subcategories (Specific Majors, School Year, etc.)
    • From the second list, the web page collects all applicable KML tracks and creates a checkbox for each one.
    • The user can then select checkboxes to display or stop displaying specific tracks on the Google Maps app.

Current State of Page

Our page is fully functional and we haven't experienced any bugs.

Features

I. Dynamic UI

Screenshot of the web page

II. Overlay Paths

We would like to create functionality where the users of our application can see more than one path at a time in the Google applet -- IE all the paths of comp sci students, all the paths of students from one of the other 5 colleges, etc.

Users can select tracks from a series of checkboxes.

Is this possible?

SurfaceDiagram.jpg

Yes. Individual GGeoXML objects are created by loading KML files, and can be added to the applet by calling addOverlay() -- multiple paths can be displayed on the same applet by calling addOverlay() repeatedly on different objects.

However, an issue comes up with caching. When KML files are processed into tracks by Google servers, Google adds the website URL to a cache. This cache is only updated every 24 hours. When another query is sent, Google will see that the same URL is being used and simply return the data it processed the first time. To work around this, the website sends a URL followed by a randomized ID so that Google processes and displays the tracks with each query.

Sources

III. Dynamically Display KML Output

Using JQuery&AJAX

We would like to give a complete and satisfying user experience by providing a UI that is intuitive and and dynamic. At no point will the user have to leave or refresh the page to get results; without being aware of the server at work in the background, the user should be able to simply achieve what they want.

To this end, we will use JQuery -- a Javascript library that makes HTML document traversal and AJAX interactions easier -- and AJAX, which is Asynchronous Javascript and XML, and refers to a series of techniques that handles the processing of data from the server-side in the background without interfering with the display on the client side.

Having a 'submit' button that redirects the user to another page -- one that is 'passed' the values of the forms the user filled out in the previous one, and processes it accordingly -- is a behavior that is given to all forms-processing pages. In our case, we would like to have that php processing page behave as if a user has pressed a 'submit button', but without the redirect.

Resources

The Workflow of Our Page

The page showMap.php is one the user will remain on to view the KML tracks overlaid on the Google Maps applet. From there, the user will interact with two drop-down menus, Categories and Subcategories, and list of checkboxes, TripBoxes, to filter the KML tracks and then choose which ones they want to see.

All of the Javascript is contained in an external main.js file. In this file, we attach anonymous events to the onSelectChanged events of the dropdown menus, and to the onClick event of the checkboxes.

1.
TRscreen2.jpg
When the user makes a new selection in the Categories drop down menu, this change calls a function called "onCategoriesChanged". This takes the value of the selected category and then constructs an AJAX object with a link to the page "outputSubcategories.php", specifying that it will be passing in some data through the POST parameters, and also says that it expects data back in the form of text, or a string. Just as if a user had clicked "submit", it gives this selected value to this page and then 'force loads' it in the background.

outputSubcategories.php executes a Sql Query to retrieve data based on the input, and outputs the results as a list of subcategories separated by commas. The Ajax object that triggered this page has attached a listener to this page's "success" event that specifies another function, populateSubcategories(data), to be called -- when the page has finished executing, it passes the output as data to this new function.

populateSubcategories(data) takes a list of values separated by commas, splits it into an array, and dynamically creates new <select> items for the Subcategories drop down menu based on these values.


2.
TRscreen3.jpg

Similarly, when the user chooses a subcategory, we use the same method as before to construct an AJAX object that will call outputTrips.php in the background. When the data from the server has been retrieved, the php page will pass the id numbers of any trips found to a javascript function called populateTripBoxes, which appends them as checkboxes to the page as seen.











3. Finally, when a checkbox is clicked, the associated trip ID is sent to the last PHP page, outputKml.php. Unlike the other pages, which used variables stored in the sessions array POST, this one uses GET and requires the variable to be appended to the end of the url. Furthermore, this one doesn't require AJAX to load it in the background -- the results of outputKml.php is sent directly to the Google Servers; as it has a header type of "Kml", it is processed directly as KML.

Depending on whether the checkbox was checked or unchecked with the click, Javascript calls are made to the Google Maps applet to add or remove overlays respectively. In order to keep track of the GGeoXML objects returned to us from Google, we restore them in a Javascript associative array, using the IDnums as keys.

The AJAX object

  
        var cat = $("#Categories").val();
        var dataString = 'category='+cat;

$.ajax({
            type: "POST",
            url: "outputSubcategories.php",
            data: dataString,
            dataType: "text",
            success: function(data) {       
                populateSubcategories(data);
            }
        });

To better understand how AJAX works and how we use it in our Javascript, here's an example of how we use it in our code. We specify that the request to this page is of type "POST", and we also include the URL to the appropriate PHP page. The variables to be passed to this page is constructed and stored in dataString, which simply takes the value of the currently selected string in the Categories dropdown menu. We also specify through dataType that we expect to get data back from the page once it is done in the form of "text" (or rather, as a string. Other return types, such as HTML and XML, are possible.)

Finally, we specify that once outputSubcategories.php is done executing and has given us our output, which it will signify through a "success" event, we will take the data it returns and make a call to a function called populateSubcategories.

Resources

IV. Be Accessible by Mobile Devices

We would like to code and design our page with mobile device access in mind.

Successful?

Tested: iPhone, iPod Touch

We can guarantee that our page is fully functional and accessible on these devices, and though we can't guarantee results on other platforms since we have not tested them ourselves, we feel reasonably confident that our page will work.

Because we are using Javascript in conjunction with the Google Maps applet instead of Flash, and all Smart Phones are able to render Javascript (and JQuery, by association), there is nothing on our page that requires external libraries or plugins to be downloaded first in order to get it to work properly.

Furthermore, we explicitly designed our page in CSS to be accessible on even small screens; because we use the descriptor float: left in our CSS instead of absolute-positioning everything, our page will automatically rearrange its elements when the screen becomes too horizontally-challenged to display everything.


TRIPhoneExample.jpg

Future expansions

Further Distinction of KML

One thing we would have liked to do but couldn't accomplish in a reasonable amount of time is the color-coding of KML tracks on the Google Maps applet. As the user selects various tracks to be displayed, it becomes fairly easy to be confused as to which track corresponds with which ID since they're all displayed using the same colors.

More information about KML tracks displayed

Another thing that might be nice is to have the checkbox list of tracks actually displayed as a list, with other identifying features about the tracks listed beneath each one. For example, right now our tracks are displayed like:

  • Track 632
  • Track 633
  • Track 634

etc, but it would be nice if they were displayed like this:

  • Track 632
    • Smith Senior, 6/28/11
  • Track 633
    • Smith Junior, 6/29/10
  • Track 634
    • Smith Faculty, 6/27/11

I imagine this would take another php page that gets called with an array of ID#, which investigates the database to see what other categories are associated with that ID#. Else, you could modify findTrips.php to return this information along with every ID#, and either pass it back as one long string or else pass it back as XML and have the javascript on showMap.php traverse and parse that XML.

Processing Instead Of Google Maps

Dissecting our page and using it with a Processing java applet should be relatively easy and painless to do: the only changes to make are directly to the main.js javascript file.

global variables

Upon loading our javascript file, you will see three variables:

var map;
var geoXml;
var overlays = new Array();

You will want to remove these objects, and any reference to these objects from the code.

Initialize()

Remove the entire "if (GBrowserIsCompatible())" block of code. This is the method that gets called once the page loads (and gets called only that one time), so do any setup in this method.

removeAllOverlays()

Change this logic to remove all the overlays from your processing applet.

checkOverlay(checkbox)

Depending on whether the checkbox passed in is checked or unchecked, you may want to write different logic here to pass or remove data from your processing applet. Keep in mind that the reason this is a separate function and not wholly contained in the function attached to the checkboxes is because it needs to be called from the function attached to the "Check all" checkbox as well.

createOverlay(idNum)

This function is heavily tied to the Google Maps applet and should be completely rewritten -- the only thing you should look at is

kml = new GGeoXml("http://maven.smith.edu/~220a-ar/outputKml.php?tripID="+idNum);

"http://maven.smith.edu/~220a-ar/outputKml.php?tripID="+idNum" will contain a reference to a kml object (since the page served by outputKml.php has a header type of KML), and it is this url that you need to parse or pass to the processing applet in order for it to 'receive' the KML.

hideOverlay(idNum)

Change this to the appropriate logic for the removal of a track from your processing applet.

Source Files


This section is only visible to computers located at Smith College