Programming Assignment 1
Web Mashup Development in JavaScript

Due on Thursday February 17 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 either the Google Chrome or the Mozilla Firefox web browser on your PC (on Linux, MAC OS X, or MS Windows). If you have neither of these two web browsers, install Chrome (preferable) or Firefox. You must use a plain text editor on your PC to write one HTML file that has embedded JavaScript code. Do not post your HTML file on a web server; you should let your browser download the HTML file as a local file. (for example, using a URL that starts with file://, such as file:///home/fegaras/test.html).

To avoid crossdomain restrictions on Chrome, close all Chrome windows and restart Chrome using the command google-chrome --disable-web-security on Linux/Mac or chrome.exe --disable-web-security on Windows. This is a very unsafe mode, so please close the browser after you are done with the project. To debug your JavaScript program on Chrome, use the Developer Tools from the Tools menu.

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".U To debug your JavaScript program on Firefox, use the Error Console (select Tools from the menu, then Error Console). You may find also firebug a useful tool for javascript debugging.

Note that these are not good solutions for bypassing the crossdomain restriction. If you had your own web server, you could have used a proxy, as described in class.

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 register and obtain web service IDs from the following web sites: If you don't want to register, you may use my own passwords, but they have a limit (1000 uses/per day for Zillow).

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).

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: 02/07/11 by Leonidas Fegaras