DIVISION OF ENGINEERING AND APPLIED SCIENCES
HARVARD UNIVERSITY

CS 260r - Special Topics in Computer Systems: Internet Scale Sensor Networking Prof. Matt Welsh Fall 2006

Assignment #1 - Google Maps Mashup of Severe Weather Alerts and Nearby Webcams

Due Date: November 16, 2006, 11:59pm EST

This assignment is intended to introduce you to developing applications that combine multiple, heterogeneous data sources. The high-level goal is to produce a map showing the geographic location of current severe weather alerts that match a user's query, along with links to nearby webcams. For this assignment, we will be implementing this using Google Maps for our display platform and PHP for our server-side scripting.

The expectation for this assignment is that you will produce a webpage that performs as follows:

1. When first visited, the webpage prompts the user (via an HTML form) for two inputs: a list of one more keywords, and a numeric radius.


2. When this form is submitted, a PHP script retrieves a current version of the severe weather alerts XML file from the National Weather Service website and parses out all alerts that match any of the user's keywords. You should consider the list of user-supplied keywords to be an OR-list; in other words, an alert need match only one keyword in order for it to be returned. The keywords should be matched against the "event" tag in the severe weather alerts XML file which is typically a short (< 10 words) description of the type of alert.


3. Next, the webcam lists should be searched for all webcams that are "near" any of the matching weather alerts. For our purposes, "near" means that the webcam's location is within the user-supplied radius of a weather alert's location. The radius value should assume location values in degrees of latitude/longitude.


4. Finally, the webpage should display a Google Map showing markers for all of the matching weather alerts and all of the nearby webcams. When a user clicks on a weather alert marker, it should display text for what kind of weather alert it is. When a user clicks on a webcam marker, it should display a link to that webcam's webpage. When a user clicks on a webcam's link, a new window should open to that url.

Here is a screenshot from my own implementation of this assignment. You are not required to copy my design exactly; this is just meant to give you an idea of how things should generally work once you are finished.

You will work in pairs for this assignment, and only one webpage should be developed between the two of you. This assignment has seven logical steps:

1. Obtain webspace that supports PHP.
   
   
   • If you have an EECS account, the public_html folder in your home directory should work find for this. The EECS server (bowser) has PHP installed; use a .php extension on your files. To debug your PHP scripts, ssh into bowser and run the following to see any error messages:
     
     grep username /var/log/apache/2006/10/www-error.log | tail
     
     In November, change the /10/ to /11/.
   
   
   • If you have an FAS account, that will work too: follow the instructions here and here. Also, here is an example of how to make a PHP script that will run on FAS.
   
   
   • If you have neither a FAS or an EECS account, check with FAS and EECS IT to see if you can get one or the other. If you still have problems, talk to us for help.


2. Sign up for a Google Maps API key and test it
   
   In order to use the Google Maps API, you to sign up for a key from Google. Note that this key is tied to the directory that your webpage will live in, so figure that out first. For example, if you sign up for a key for the URL http://eecs.harvard.edu/~ianrose/ and then later try to use it on the webpage http://eecs.harvard.edu/~ianrose/cs260r/index.php, that won't work, because in the latter case the directories are different. Once you know the URL that you will be using, go to http://www.google.com/apis/maps/signup.html and follow the instructions. If everything works right, you will get a key and they will also give you a chunk of sample javascript that already has your key inserted into the right spot in the code. Copy and paste this code into an html file on your website and test if it works.


NOTE: I strongly encourage you to complete steps 1 & 2 ASAP
If you have a problem with obtaining webspace, getting PHP to work on your website, getting Google Maps to work, etc. these are things that should be addressed sooner rather than later.


3. Learn to use Google Maps
   
   Next, I suggest that you spend some time playing around with Google Maps and learning how to create markers (those are the little colored pushpins that denote items of interest). Google's main API page (http://www.google.com/apis/maps/) has links to both a discussion group as well as their online documentation. I have also created a basic google map that might be useful to see - choose "view source" in your browser to see the code that I used.
   
   
4. Understand your data sources
   
   
   • http://www.weather.gov/alerts/ - This page links to XML files for current severe weather alerts (use the CAP format ones, not RSS). These data sources are dynamic and thus should be retrieved "fresh" for every user query (i.e. do not simply download a copy to your local disk and parse that every time a query is submitted).
   
   
   • 12084-Webcams.kml | webcams.kml | web_cams_worldwide-update_2.kml - These are three different XML listings of webcams that I pulled off of a Google Earth bulletin board. They will not change, so feel free to save these to your website as local files instead of retrieving them from this page every time someone submits a query on your webpage.
   
   
   • http://www.nws.noaa.gov/geodata/catalog/wsom/html/cntyzone.htm - This page provides geographic conversion tables that you may find useful.
   
   
   Before you get started coding, I suggest you spend a few minutes just scanning through these documents so that you get a general idea of how they are structured and thus how best you should handle them.
   
   
5. Learn to use PHP and parse XML
   
   If you haven't used PHP before, its simply a way to mix together server code (the stuff doing the work) with output (in this case, HTML) in a convenient way. In many languages, this seperation is made via printf-type commands. e.g. printf("<html><body>Hello World!</body></html>");
   
   In PHP, you use tags to denote what parts of the file are code, and which are output. PHP is very similar to perl and shares many of the same commands, but is not exactly the same so don't be fooled. Here is a simple example - note that I had to name the file with a .txt extension so that the webserver would think its a text file and simply dump the entire contents to your browser, if I gave it a .php extension, like here, the webserver treats the file as a PHP file and the code parts are actually executed and you only see the HTML bits. I find http://us3.php.net/manual/en/index.php to be a good online reference, particularly for looking up built-in functions (there are a lot available).
   
   PHP can also process user-input from HTML forms. Here is an example of a PHP file that gives the user a text-input form and then does some processing on it when submitted, and here is the same file with a .txt extension. Note my use of the handy built-in function is_numeric that I found on the PHP reference website linked above.
   
   Lastly, you will need to do some XML parsing. You are free to do this however you want, but I recommend using perl's XML::Parser module (this is a case where some perl code does happen to work in php). Don't get overwhelmed by all of the stuff on this page - the vast majority you don't need. Here is an example of a PHP file that parses dummy.xml and does some very basic processing - here is the same file with a .txt extension.
   
   
6. Put it all together!
   
   Now you should have all the tools you need to complete the assignment. If you have administrative questions about the assignment (i.e. something is unclear, one of the provided links is broken, etc.) please e-mail ianrose@eecs. If you have coding problems, try your best to find the answer on the web (and remember you have a partner too). If it continues to stump you I will try to help out.
   
   
7. Submit the URL of your webpage and source code.
   
   The final step is to send us the URL of your finished webpage along with a gzipped tar file (or ZIP file) with ALL of your source code. This includes: html files and php files, as well as any off-line pre-processing scripts or anything else. If in doubt, include it. You do NOT need to include the data files themselves (we already have them!). Only one submission should be made per pair of partners (not one per person).

      group-usernames/      (e.g., 'brchen-ianrose/')
        README              Include your names, emails, the URL of your webpage
        web/                Any webpage files (html, php, etc.)
        other/		 Any other code you might have
   

   Email this as a .tar.gz or ZIP attachment to ianrose@eecs by 11:59pm on November 16, 2006. No extensions to this deadline will be granted.