4.4 Zillow Web – Setting up and using a proxy

Get an API ID from Zillow

First and foremost, you must go to Zillow and create an account in order to obtain a key to their API. Do so by registering with Zillow.

Once you have a “zws-id”, you are good to go.

Set up a maproom

Let’s get started by creating a barebones maproom with a side panel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>
   
    <!-- Google Maps API -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   
    <!-- jQuery -->
    <script type="text/javascript" src="http://yohman.bol.ucla.edu/jquery-1.5.2.min.js"></script>
   
    <script type="text/javascript">    
        //declare namespace
        var yoh = {};
       
        //declare map
        var map;
       
        //trace function for debugging
        function trace(message)
        {
            if (typeof console != 'undefined')
            {
                console.log(message);
            }
        }
   

        //Function that gets run when the document loads
        yoh.initialize = function()
        {
            var latlng = new google.maps.LatLng(34.0194543,-118.4911912);
            var myOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        }
    </script>
</head>

<body onload="yoh.initialize()">
    <!-- side panel div container -->
    <div style="position:absolute; width:380px; height: 100%; overflow:auto; float:left; padding-left:10px; padding-right:10px;">
        <h1>Zillow Web</h1>
    </div>
    <!-- map div container -->
    <div id="map_canvas" style="height:100%; margin-left:400px;"></div>
</body>
</html>

The proxy script

As explained in the previous tutorial, any call to the Zillow API must go through a proxy. For the purposes of this exercise, I have created a proxy script on “yohman.com” that we can all use. The proxy “accepts” a variable called “url”, which it sends to the corresponding address, in this case, as a Zillow API request. This script needs to be saved in the same domain (server) that your other files reside on. Since each student in the class is now given FTP access to the domain “yohman.com”, and since I have stored this file on a folder within the “yohman.com” domain, all that is needed to do is to “call” this file in the javascript… assuming that the javascript file also resides somewhere on “yohman.com”.

The URL for this script is:

http://www.yohman.com/proxy/proxy_xml.php?url={url of API call to Zillow}

Using the proxy with Javascript

To use the proxy to make a Zillow request, you will have to perform a few steps.

First, the Zillow request URL must be encoded in a format that the proxy can interpret. Let’s make a request to get demographic data from Zillow, using the following documentation:

In order to get demographics for zipcode 90024, the URL would be:

http://www.zillow.com/webservice/GetDemographics.htm?zws-id={your zillow id}&zip=90024

(make sure to add your own zws-id number)

In order to use the proxy with this url, you must first encode it using the “encodeURIComonent” javascript function. This encodes the url into a usable format for a proxy. Without encoding the url to Zillow, the call will fail:

1
2
url = 'http://www.zillow.com/webservice/GetDemographics.htm?zws-id={your zillow id}&zip=90024';
encodedurl = encodeURIComponent(url);

Using the jQuery ajax function

Previously, we learned how to use the getJSON function to get data from the Metro API. Since Zillow provides their data in XML format, we will use a different function called jQuery .ajax. The ajax function will make the call to Zillow using the proxy script url.

1
2
3
4
5
6
$.ajax({
    type: "GET",
    url: "http://www.yohman.com/proxy/proxy_xml?url=" + encodedurl,
    dataType: "xml",
    success: yoh.xmlParser
});

Now let’s put both of these pieces together and create a function called “getZillow”.

1
2
3
4
5
6
7
8
9
10
11
yoh.getZillow = function (zip) {
    url = 'http://www.zillow.com/webservice/GetDemographics.htm?zws-id=X1-ZWz1bvv3f4mex7_5kvb6&zip='+zip;
    encodedurl = encodeURIComponent(url);

    $.ajax({
        type: "GET",
        url: "http://www.yohman.com/proxy/proxy_xml.php?url=" + (encodedurl),
        dataType: "xml",
        success: yoh.xmlParser
    });
}

Notice that the function requests a “zip” parameter. Also notice that for now, we are simply tracing the results to the console window.

Let’s break down the $.ajax call.

  • type: for API calls to read data, this will almost always be “GET”
  • url: this is the url you are calling. Notice that we use our proxy as the main URL, and tack on an additional “url” value that points to the API call. Also notice that it uses the encodedurl.
  • dataType: Zillow provides data in xml format
  • success: You can add a function here to run if the call was successful. For now, we’re adding a call to a new function, “yoh.xmlParser”

Let’s create the xmlParser function that will run on a successful .ajax request.

1
2
3
yoh.xmlParser = function(xml) {
    trace(xml);
}

Running the call

Now let’s see this function in action. Add a call in the “initialize” function and pass a zipcode of your choice with it. In this example, I’m adding zipcode 90024:

yoh.getZillow(90024);

Open the console window, and check the results.

zillow results

zillow results

(full sample code)

The proxy PHP code

FYI, the PHP code in the proxy is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
    if(empty($_GET['url']))
    {
        echo 'ERROR:  No url provided';
    }
    else
    {
        header ("Content-Type:text/xml");  
        $url = stripslashes($_GET['url']);

        $str = @file_get_contents($url);
        echo $str;
    }
       
?>

Leave a Reply