Programming Assignment 3
Web Mashup: Display House Prices on a Map

Due on Thursday October 19 before midnight
Worth 6% of your final grade

Description

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 estimated price of the house.

This project must be done individually. No copying is permitted. Note: We will use a system for detecting software plagiarism, called Moss, which is an automatic system for determining the similarity of programs. That is, your program will be compared with the programs of the other students in class as well as with the programs submitted in previous years.

Note that, if you use a Search Engine to find similar programs on the web, we will find these programs too. So don't do it because you will get caught and you will get an F in the course (this is cheating). Don't look for code to use for your project on the web or from other students (current or past). Just do your project alone using the help given in this project description and from your instructor and GTA only. Finally, you should not post your code nor deploy your project on a public web site.

Platform

As in Project #2, you will develop this project on your PC/laptop using XAMPP. Download the project3 zipped directory project3.zip. Unarchive the files inside your web server document root directory. The project3 directory contains 3 files: proxy.php, map.html, and map.js. As in project #2 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 explained 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 get an API key (you will need to login using your google account). 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 twp API keys, you put them in map.html and map.js (replace ???? with your keys), you start your XAMPP web server, and you test your setup on your web browser by using the URL address http://localhost/project3/map.html and by typing the address of some existing house (example: 904 Austin St, Arlington, TX 76012). 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 3 sections:

  1. a text input with two buttons: Find and Clear.
  2. a Google map of size 600*500 pixels, initially centered at (32.75, -97.13) with zoom level 17
  3. a text display area

Your program must insert an overlay marker on the Google map pinned on the latest house that displays the house's postal address and its Zestimate value (the house value) from zillow.com. The text display area is the history log that displays all the houses (addresses and prices) that you have found so far (latest hous is last). Each time you find a house, you erase the old marker from the map (if any), you display a new marker on the map on the house location (with address and price), and you append this information to the display area. There are two ways to find a house:

  1. by providing a valid postal address, say "904 Austin St, Arlington, TX 76012", in the text input and you push the Find button.
  2. by clicking on a house on the map.
To implement the first way, you need to get the address from the text input and 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 from the input text area into these two strings. Then you clear the old marker and insert a new overlay marker on the map at the latitude and longitude of this postal address, using Geocoding. To implement the second way, 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 you do the same as the first way.

Note that 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 and you display a new 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 (third section). Note also that the map must display at most one marker and the text display area may contain multiple addresses/zestimates. If it is an invalid address or there is no Zestimate value, you don't change anything. Finally, the Clear button clears the text input only.

Hints:

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

Zip your project3 directory and use the form below to submit your project3.zip file. 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 #3:

Last modified: 10/05/2017 by Leonidas Fegaras