Zillow neighborhoods on Google maps

I’m working on a neighborhood-related map feature for something at work. Zillow blog released its neighborhood shape file data to the public to be able to map the boundaries on various things, most notably Google Maps.

While doing some research into the situation, this undertaking is going to be pretty complicated. A brief Google search gave me several key blogs and tools that I think will help me in this project.


Trying to use shp2text. Downloaded ZIP file. Damn thing won’t compile on Mac.

make: *** No rule to make target `shapefil.h’, needed by `shpopen.o’.  Stop.

Downloaded shapefile C lib. Compiled shapefile and copied chapefil.h to my shp2text dir. Damn shp2text still won’t compile. Damn Mac.

cc -g -c dbfopen.c
dbfopen.c:210:24: error: safe-ctype.h: No such file or directory
make: *** [dbfopen.o] Error 1

Got shp2text to compile. Found a thread that had exact same problem as me. Comment out include safe-ctype.h from the dbfopen.c file. That file is in the shp2text dir.

Now I can use shp2text to convert my .shp file into 3 formats: tab-separated value spreadsheet, GPX (XML), or geo.location (XML). I’m not sure what these are but we’ll find out soon enough.

shp2text —gpx ZillowNeighborhoods-CA.shp

To convert into GPX it asks me to choose some fields. I presume the field selection availability is pulled from the .shp file somehow.

shp2text —gpx shape_file.shp name_field# attribute_field#
;utility to dump esri shapefiles into various text formats
;you must supply two field numbers
Field 0: Type=String, Title=`STATE’, Width=2, Decimals=0
Field 1: Type=String, Title=`COUNTY’, Width=43, Decimals=0
Field 2: Type=String, Title=`CITY’, Width=64, Decimals=0
Field 3: Type=String, Title=`NAME’, Width=64, Decimals=0
Field 4: Type=Double, Title=`REGIONID’, Width=32, Decimals=10

Since I want neighborhood name and city, I picked 2 and 3.

shp2text —gpx ZillowNeighborhoods-CA.shp 2 3

But it pushes everything to standard output. So I need to send it to a file…

shp2text —gpx ZillowNeighborhoods-CA.shp 2 3 > cali.xml

Now I have a GPX file cali.xml of all the neighborhoods in California. I think I can use this static file in Google maps but I’m not sure if it will give me a filled polygon or not.

The geo.location option looks promising because it specifies a geo.polyline but it does not give me metadata for the city or neighborhood name. The format is useless to me. Damn!

Use IFRAME to access window.opener from HTTPS popup into a HTTP page

You can use an IFRAME on in a HTTPS popup window to communicate back to a window.opener that is HTTP. First some background…

Recently I had to make an address book importer for work. Basic use case:

  • go to a page that needs email addresses in a textarea
  • click contact address importer (opens a popup)
  • login to my email provider (yahoo, gmail, etc)
  • pick the contacts i want
  • add those contacts to my textarea

In the use case scenario above I would have two different domains:

  1. HTTP:// (window.opener page)
  1. HTTPS:// (popup for login)

The popup must be HTTPS because I users will send their login credentials for the email provider third party sites. Unfortunately a problem develops when you have an HTTP page that opens a HTTPS popup. Browsers will block javascript from accessing the parent window that originated the popup window.opener in javascript. I presume the browser consider HTTP->HTTPS communication to be cross-domain scripting, which is no-no.

Once a window becomes HTTPS browser security prevents it from communicating with window.opener ever again. That means you cannot do this to circumvent the security.

  1. popup HTTP (choose email provider)
  2. transition to HTTPS (login)
  1. transition to HTTP (choose contacts)

We used Plaxo for a long time so I know it is possible to pull contacts from the Plaxo picker into my own page through HTTPS. I basically copied the method that they use, but my method is much less extensible and less flexible.

The key is to have an IFRAME whose src URL is in the same domain/protocol as your opener. So, on the contact picking page I have a few key components.

the HTTPS page

The critical part here is having <form target=""> and <iframe name="">. Having this will pass the processed data from the form into the IFRAME. The SRC of the IFRAME will NEED to be a Fully qualified absolute path.

<form method="post" 
action="http://localhost/process_selected" target="callback_iframe">
<iframe name="callback_iframe" src="#nothingyet"></iframe>

the IFRAME contents

The critical part here is that top.opener basically refers to window.opener of the HTTPS page. It is OK to access .opener here because the IFRAME and the opener both originate from the same domain.

dostuff() {
  top.opener.mycontacts = thecontactsyoujustsent;
<body onload="dostuff()">

the controllers

for http://localhost/process_selected

  • receive selected inputs
  • process data however you want
  • return IFRAME page. it will automagically go into the IFRAME of the secure page.

Using MochiKit doXHR with POST

This is a followup to my old post Using MochiKit doXHR using POST instead of GET.

The data that you send back in your controller will be stored in the Deferred object that gets returned. Look in the responseText field of the object.

var d = doXHR(url, 
   { method:‘POST’, 

The headers piece was the critical for the POST to work on my configuration.

Syndicate content