Programming Assignment 1
Web Mashup Development in JavaScript

Due on Thursday February 11 before midnight


Description

This project must be done individually. No copying is permitted. The goal of this project is to learn client-side web programming using JavaScript and AJAX. More specifically, you will create a web mashup that combines two web services: Google Maps and the Zillow API. You will need to create an XMLHttpRequest object to communicate with the Zillow API asynchronously.

Please look at the test.html that uses the XMLHttpRequest object. (To see the source code, on the test.html frame do: right click -> This Frame -> View Frame Source.)

Platform

For this project, you have to use the Firefox web browser on your PC (on Linux, MAC OS X, or MS Windows). If you don't have Firefox, you can download it from here. You may use a plain text editor on your PC to write one HTML file that has embedded JavaScript. Do not post your HTML file on a web server; you should let your browser download the HTML file as a local file.

To avoid crossdomain restrictions on Firefox, visit the address about:config and change the property:

signed.applets.codebase_principal_support
to true. After you are done with this project, remember to toggle this property back to false. Your JavaScript program should execute:
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
before it sends any AJAX request. Look at the test.html. You may get a pop-up window from Firefox asking you if you want to allow this operation: select "Allow". Note that this is not a good solution to the crossdomain restriction; if you had your own web server, you should have used a proxy, as described in class, but you should not do that for this project.

Documentation

The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on JavaScript and AJAX.

Web Services used by the Web Mashup

For this project, you will use the

You can learn more about the Google Maps API. To use these web services, you need to use these passwords, which work only on local html files and on the omega.uta.edu server.

Project Description

Your HTML web page must have 3 sections:

  1. an input text area with a button
  2. a Google map of size 600*500 pixels, initially centered at (32.75, -97.13) with zoom level 16
  3. a text display area
The first section allows you to recenter the google map by providing a postal address (See the Geocoding example that describes how to convert a string address into a GLatLng). Don't put any overlay marker on the map when you recenter the map.

When you click on the map, your program must find the address of the point you clicked (using Reverse Geocoding) and must send an asynchronous request to the Zillow API (GetSearchResults API) to retrieve the Zestimate (in $), which is the estimated home value of the house at that address. The address used by the GetSearchResults API must have two components: address and citystatezip. This means that you must use JavaScript code to break the address string returned by reverse geocoding into these two strings. The call to the GetSearchResults API must be done using AJAX: inside the callback function (the listener for the left click) of the map, you should create an AJAX request that calls the GetSearchResults API. When the result arrives (this is the callback of the AJAX request), you extract the Zestimate, you clear all previous overlay markers from the map, and you display an overlay marker on the map at the point you clicked. The overlay marker must display the house postal address and its Zestimate. The same information must be appended at the end of the text display area (3rd section). Note that, at each time, the map should display at most one marker with an info window, but the text display area may contain many addresses/zestimates (which is the entire history).

How to URL-encode the address to send it to zillow: use the method encodeURI(address).
How to extract the Zestimate value from the zillow XML response: use the method getElementsByTagName('amount').

Note that everything should be done asynchronously and your web page should never be redrawn completely. This means that the button in the input text area must have a JavaScript action, and should not be an HTTP request. You need only one XMLHttpRequest object for sending a request to Zillow, since Google Maps is already asynchronous. Don't use any tool to develop your program; simply use a text editor. Don't use stylesheets; use standard HTML tags (<p>, <li>, <dt>, etc). Use the Error Console to debug your program (on Firefox, you select Tools from the menu, then Error Console). You may find also firebug a useful tool for javascript debugging.

What to Submit

Use the form below to submit your HTML file. You may submit your file as many times as you like, but only the most recently submitted file will be retained and evaluated.

Submit Project #1:

Last modified: 01/27/10 by Leonidas Fegaras