Programming Assignment 2
Web Mashup Development in JavaScript

Due on Thursday February 9 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.) Due to crossdomain restrictions, this code will not work as-is on most browsers but you can run it on your Eclipse web browser (you R-click on it and use: Open with -> Web Browser).

Platform

Note: Do not post your project files on a public web server. You will do this project on your Eclipse IDE. Make sure that you have installed the "JavaScript Development Tools SDK" plug-in during Project1. From the File menu in Eclipse, create a new Static Web Project with a name project2. R-click on project2 at the Project Explorer (left menu) and select New -> HTML File. Use the file name Project2.html. You can cut-and-past the test.html inside the file. You can view this file using the internal Eclipse web browser: you R-click on the file name at the Project Explorer and select: Open with -> Web Browser. You can edit the HTML layout of this file with Open With -> Web Page Editor. Note that Eclipse does not have a JavaScript debugger by default. Also, although the Chrome web browser has an embedded JavaScript debugger (just select: Tools -> Developer Tools), it will not allow AJAX crossdomain requests. The same applies for Firefox with the Firebug plug-in. A good way to debug JavaScript with Ajax is to use Google's Javascript/Ajax debugger tool, which connects Eclipse to a Chrome web browser, but you don't need to do this 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

To use the Zillow API, you need to register and obtain web service IDs from Zillow Web Services ID (ZWSID).

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 simple example in Geocoding and Reverse Geocoding that describes how to convert a string address into a LatLng object. Use R-click "View Page Source" to see the code.) 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. You don't need to use stylesheets; you can use standard HTML tags (<p>, <li>, <dt>, etc).

How to deploy this project on a web server

NOTE: You should neither post nor deploy your project on a public web server. But if you are curious to know how to do this properly, here are the directions (don't do this for this project). To bypass the crossdomain restriction (ie, to send AJAX requests across domains), you need to create a proxy on the same server that you deploy your web application. More specifically, you can create the following proxy.php script:

<?php
  header("Content-type: text/xml\n\n");
  $zwsid = "";
  $host = "http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=" . $zwsid;
  $url = $_SERVER['QUERY_STRING'];
  $ch = curl_init($host . "&" . $url);
  curl_exec($ch);
  curl_close($ch);
?>
(need to fill out the Zillow ID in $zwsid). Then you change you AJAX requests in your JavaScript program to go through the proxy, eg. request.open("GET","proxy.php?address=2114+Bigelow+Ave&citystatezip=Seattle%2C+WA").

What to Submit

Use the form below to submit your files. 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 #2:

Last modified: 01/26/12 by Leonidas Fegaras