Programming Assignment 4
Web Mashup Development: Display House Prices on a Map

Due on Tuesday October 29 before midnight
Worth 6% of your final grade

Description

This project must be done individually. No copying is permitted. The goal of this project is to create a web mashup that combines two web services: Google Maps and the Zillow API, using JavaScript and AJAX. When you click on a house on the map, your application will display the postal address and the price of the house.

Platform

As in Project #3, you will develop this project on the Omega web server and you will test the project on your PC/laptop using the Mozilla Firefox web browser. Login at omega.uta.edu using SSH and do the following:

cd public_html
wget http://lambda.uta.edu/cse4392/project4.tgz
tar xfz project4.tgz
cp project3/.htaccess project3/.htpasswd project4/
cd project4
The project4 directory contains 3 files: proxy.php, map.html, and map.js. As in project #3, you should not change proxy.php. All the web service requests to zillow.com should go through this proxy. See the example in map.js. Your project is to edit map.html and map.js as described in the description of the web application.

Web Services used by the Web Mashup

For this project, you will use the

To use Google Maps, you need to create a Google Account (if you do not have one) and get an API key. To use the Zillow API, you need to register and obtain a web service ID from Zillow Web Services ID (ZWSID). After you get the API key, you put it in map.js and you test your setup on your web browser by using the URL address:
http://omega.uta.edu/~xyz1234/project4/map.html
(use your username instead of xyz1234) and by typing the address of some existing house. It will display the estimated value of this house (empty if the address is invalid).

Project Description

You need to edit the HTML file map.html and the JavaScript file map.js. Your HTML web page must have two sections:

  1. a Google map of size 600*500 pixels, initially centered at (32.75, -97.13) with zoom level 16
  2. a text display area

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 (2nd 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. You need only one XMLHttpRequest object for sending a request to Zillow, since Google Maps is already asynchronous.

What to Submit

Important: In the commet on top of your music.html file, put the URL address to run your web application, such as http://omega.uta.edu/~xyz1234/project4/map.html. Use the form below to submit your map.html and map.js files. We do not accept email or hardcopy submissions. You may submit your files as many times as you like, but only the most recently submitted files will be retained and evaluated (newly submitted files replace the old files under the same file name). After you submit the files, please double-check that your submitted files are correct by clicking on the Status link.

Submit Project #4:

Last modified: 10/10/13 by Leonidas Fegaras