Some years ago, Zillow released its neighborhood boundary files for the United Statesvia Creative Commons Sharealike 3.0 license. It's a great resource.If you're interested in maps for other countries, check outOpenStreetMaps.
However, if you haven't used geographic shapefiles before, it can be a bit confusing as to how to integrate Zillow's map data into your own application.
I've built a free, open source demo application,MapApp, to demonstrate how to use the Zillow neighborhood boundaries and integrate them with Google Maps, geolocation and geocoding.
MapApp is built using theYii Frameworkand can be run on any MySQL, PHP-capable server. MapApp also leveragesGoogle Maps API,HTML5 Geolocationhelper from estebanav,eGeocoderandegMap(the latter two are Yii extensions).
Setting Up Your Server
To get started, you can find theMapApp code on GitHub.Follow theinstallation stepswhich have beentested for Ubuntu 14.04 atDigital Ocean but should work withany version of LAMP.
You can either clone the repository or download a copy. Configure the Apache site (as described in the installation steps) and restart Apache.
The process takes about 45 to 60 minutes. There's a lot to setup:configuring your server, your DNS, unpacking thecode, setting upyour Apache server, your MySQL database, installing the configuration file, running the active record migration,installing the mapping libraries, downloading andimporting and adjusting the Zillow data.
If you'd like to save time, I offer a pre-configured image of MapAppfor Digital Ocean. However, you'll learn more if you walk through all of the steps yourself.
Prepare the Zillow Neighborhood Data
Once you've created your MySQL database for MapApp, it's time to get the Zillow data.
Install theGeospatial Data Abstraction Librariesand unzip:
1 | sudo apt-get install gdal-bin |
2 | sudo apt-get install unzip |
Make a directory to temporarily store the Zillow data and copy the download scripts.
1 | mkdir ~/zillow |
2 | cp /var/www/mapapp/docs/wget-zillow.txt ~/zillow/wget-zillow |
Customize the batch file to download the files for the states that you want (e.g. California, Oregon, Washington, or all). Then, run the download script. This will download all of the desired zip files from Zillow:
1 | bash wget-zillow |
Then, prepare the MySQL import scripts:
1 | cp /var/www/mapapp/docs/import-zillow.txt ~/zillow/import-zillow |
2 | copy /docs/import-zillow.txt to ~/zillow/import-zillow |
Customize the list of states in the scriptwhose shape files you would like to import into MySQL.You'll also need to customize the database name, credentials and neighborhood table name in your local file and run the script. This will use theogr2ogr toolto import the shape (.shp) files into MySQL:
1 | bash import-zillow |
Configuring MapApp
You'll need to customize the/docs/config-mapapp.inifile with your own settings, especially the MySQL access settings:
1 | mkdir /var/www/secure |
2 | cd /var/www/secure |
3 | #note: names are reversed below from github to the server |
4 | cp /var/www/mapapp/docs/mapapp-config.ini /var/www/secure/config-mapapp.ini |
5 | sudo nano config-mapapp.ini |
Then, run the active recorddatabase migration to initialize MapApp.Database migrationsare part of the Yii Framework, and serve to create tables and schema in a programmatic way:
1 | cd /var/www/mapapp |
2 | ./app/protected/yiic migrate up |
When prompted, enter a user name, email and password for your administrator account. This is what you'll use to login in to MapApp's home page.
Finally, you'll need to run a script to reverse the geographic coordinates in the Zillow neighborhoods MySQL table.Visit http://yourdomain.com/neighborhoods/reverse. Depending on the number of Zillow state files you imported, this could take a few minutes. I've found that ogr imports the Zillow latitude and longitude data in an opposite coordinate order than Google Maps requires.
Using MapApp
Visit your home page at http://mapapp.yourdomain.com. Login with the user name and password you created during the database migration.
Browsing and Viewing Neighborhood Maps
Browse your imported neighborhoods and click on any you wish to view. The next neighborhood link makes it easy to see more than one. You can also search by neighborhood name, city, state or county
I'm using theYii extension egMapto display Google Maps using the Zillow neighborhood polygon data. However, any PHP library for Google Maps or JavaScript will work just as well.
The prepareMap function in the Neighborhoods model requests the Zillow polygon data from the database as well as the center point of the neighborhood (called acentroid). We use the centroid to position the viewport of the map.
1 | public function prepareMap($id) { |
2 | |
3 | $pg = Yii::app()->db->createCommand() |
4 | ->select('AsText(SHAPE) as region,ASTEXT(Centroid(SHAPE)) as center') |
5 | ->from(Yii::app()->getDb()->tablePrefix.'neighborhoods') |
6 | ->where('OGR_FID=:ogr_fid', array(':ogr_fid'=>$id)) |
7 | ->queryRow(); |
8 | |
9 | Yii::import('ext.gmap.*'); |
10 | $gMap = new EGMap(); |
11 | $gMap->setJsName('map_region'); |
12 | $gMap->width = '500'; |
13 | $gMap->height = '500'; |
14 | $gMap->zoom = 13; |
15 | $center = new stdClass; |
16 | list($center->lat, $center->lon) = $this->string_to_lat_lon($pg['center']); |
17 | $gMap->setCenter($center->lat, $center->lon); |
18 | $coords = $this->string_to_coords($pg['region']); |
19 | $polygon = new EGMapPolygon($coords); |
20 | $gMap->addPolygon($polygon); |
21 | |
22 | return $gMap; |
23 | } |
The Neighborhoods controller view action renders the page with the map:
1 | public function actionView($id) |
2 | { |
3 | $gMap = Neighborhoods::model()->prepareMap($id); |
4 | $this->render('view',array( |
5 | 'model'=>$this->loadModel($id), |
6 | 'gMap' => $gMap, |
7 | )); |
8 | } |
Using HTML5 Geolocation
Click on Geolocation in the navigation bar to locate your neighborhood from your WiFi address. This will not work via cellular.
You will likely need to grant permission to your browser for geolocation for this feature to work (look for a popup below the address bar).
Then, you'll be able to click the Lookup Your Location Automatically option:
Sometimes you'll need to refresh to get the correct responseafter granting permission - or from certain WiFi locations.We're using thegeoposition script from estebanavto support HTML5 Geolocation with the widest possible browser support.
Once your location is found, we'll show your location on a map with your Zillow neighborhood as well as Geocoding information looked up independently.
We use theYii eGeocoding extensionto look up additional data about your location. This is mainly to show additional sources of data you can use beyond the Zillow boundary data.
1 | public function actionIndex() |
2 | { |
3 | $model = new Geolocation(); |
4 | |
5 | if(isset($_POST['Geolocation'])) |
6 | { |
7 | $info = Yii::app()->geocoder->reverse($_POST['Geolocation']['lat'],$_POST['Geolocation']['lon']); |
8 | |
9 | $gps_for_sql = "Point(".$_POST['Geolocation']['lat']." ".$_POST['Geolocation']['lon'].")"; |
10 | $neighborhood = Neighborhoods::model()->lookupFromLatLon($gps_for_sql); |
11 | $gMap = Neighborhoods::model()->prepareMap($neighborhood['OGR_FID']); |
12 | |
13 | $marker = new EGMapMarkerWithLabel($_POST['Geolocation']['lat'],$_POST['Geolocation']['lon'], array('title' => 'You are here!')); |
14 | $gMap->addMarker($marker); |
15 | $gMap->width = '400'; |
16 | $gMap->height = '400'; |
17 | |
18 | $this->render('view',array( 'data'=>$neighborhood,'info'=>$info,'gMap' => $gMap)); |
19 | |
20 | } else |
21 | $this->render('index',array( 'model'=>$model)); |
22 | } |
Going Further
If you'd like to see more, including drawing your own region maps, try out my side-project,Geogram. It allows you to create email-powered communities around neighborhoods, user-created regions, places and the Google Places directory.
Geogram has a number of extended mapping and email features.If you're interested in a tutorial on Geogram's use of the Mailgun email API, readHow Geogram built a free group email service using Yii for PHP with MySQL. I may write a tutorial about drawing regions for Google Maps in the future - post a comment below if you want to read that.You might also be interested in some of my other Yii-based tutorials. I will be writing a Yii Framework introduction for Tuts+ soon.
Please feel free to post corrections, questions or comments below. You can also reach me on Twitter@reifmanoremail medirectly.
