Lab 11 - Maps
Overview
This week, we'll learn how to use the Yahoo Maps API. This will involve a very small amount of JavaScript code, but fortunately we don't have to write it - everything we need is in the API already. Hopefully, you should see some similarities between this and another project you're working on...

 

Getting Started

Grab the sample xml file. This contains an RDF dump of restaurants in Bloomington. This is the file we'll be mapping. Put it in your public_html folder on Sulu, and be sure that its permissions are set correctly (world-readable). Create your lab directory, and start editing a file called mapper.cgi.

If you're using Emacs, ESC-x cperl-mode will put you in Perl mode (which won't be entered automatically since the file does not end with a .pl extension). The following line may be added to your file to make Emacs recognize it as a Perl file, despite its extension: 

#local-variable cperl-mode
Usually I put this line at the very top or very bottom of the file.

 

Printing the Map

Let's do this in two steps:

  1. Modify mapper.cgi so that it prints out a simple HTML page. A message like "this is working" would be enough.
  2. Take a look at the Yahoo AJAX API documentation. The key bit of documentation to look at is Overlaying GeoRSS data. We can use the code sample almost verbatim, changing only two things:
    • Near the top of the HTML example - your application ID should replace YahooDemo.
    • The last bolded line in the example - you should replace the URL given there with the URL to your sample.xml file, which is http://sulu.informatics.indiana.edu/~YOURUSERNAME/sample.xml.

Do this:
Modify your script to print the code for the Yahoo Maps API as in (2) above. Don't make this harder than it is; all you need to do is arrange for that code to appear on the screen when your program is run on the command line.

 

Finishing Up

Finally, let's add a small amount of interactivity to this program.

Do this:
Adapting the CGI code from last lab, add a button to your page with the caption "Print Map." Modify your program so that it does not print the map unless that button has been pressed. That is, when you initially visit the page, the map should not be printed; when you click the button, the map should print. Recall that this is very similar to last week's lab, except this week we don't have to worry about a zip code. You can still check param() > 0 the same way, however, as a button also passes a parameter named after itself.

 

Submit your assignment
Submit your mapper.cgi program to the assignment on Oncourse. Also, be sure you leave it in your CGI directory, as we may use it during grading.
Thanks to Jacob Ratkiewicz for lab content, Sid Stamm for CSS stylesheets, and Rob Signorelli for original syntax-highlighting JavaScript.