So verwenden Sie Zillow Neighborhood Maps und HTML5-Geolocation

Was Sie erstellen werden

Vor einigen Jahren veröffentlichte Zillow über die Creative Commons Sharealike 3.0-Lizenz Dateien für die Nachbarschaftsgrenze für die Vereinigten Staaten. Es ist eine großartige Ressource. Wenn Sie an Karten für andere Länder interessiert sind, besuchen Sie OpenStreetMaps. 

Wenn Sie jedoch zuvor keine geographischen Shapefiles verwendet haben, kann es etwas verwirrend sein, wie Sie die Kartendaten von Zillow in Ihre eigene Anwendung integrieren können.

Ich habe eine kostenlose Open-Source-Demoanwendung, MapApp, entwickelt, um zu demonstrieren, wie die Grenzen der Nachbarschaft von Zillow verwendet und in Google Maps, Geolocation und Geocoding integriert werden.

MapApp wurde mit dem Yii Framework erstellt und kann auf jedem MySQL-PHP-fähigen Server ausgeführt werden. MapApp nutzt auch Google Maps API, den HTML5-Geolocation-Helfer von Estebanav, eGeocoder und egMap (die letzten beiden sind Yii-Erweiterungen)..

Server einrichten

Um zu beginnen, finden Sie den MapApp-Code auf GitHub. Folgen Sie den Installationsschritten, die für Ubuntu 14.04 bei Digital Ocean getestet wurden, sie sollten jedoch mit jeder LAMP-Version funktionieren.

Sie können entweder das Repository klonen oder eine Kopie herunterladen. Konfigurieren Sie die Apache-Site (wie in den Installationsschritten beschrieben) und starten Sie Apache neu.

Der Vorgang dauert etwa 45 bis 60 Minuten. Es gibt viel zu konfigurieren: Konfigurieren Sie Ihren Server, Ihr DNS, entpacken Sie den Code, richten Sie Ihren Apache-Server und Ihre MySQL-Datenbank ein, installieren Sie die Konfigurationsdatei, führen Sie die Migration der aktiven Datensätze durch, installieren Sie die Zuordnungsbibliotheken, laden und importieren Sie den Zillow Daten. 

Wenn Sie Zeit sparen möchten, biete ich ein vorkonfiguriertes Bild von MapApp für Digital Ocean an. Sie werden jedoch mehr erfahren, wenn Sie alle Schritte selbst durchlaufen.

Bereiten Sie die Zillow Neighborhood-Daten vor

Nachdem Sie Ihre MySQL-Datenbank für MapApp erstellt haben, ist es Zeit, die Zillow-Daten abzurufen.

Installieren Sie die Geospatial Data Abstraction Libraries und entpacken Sie:

sudo apt-get install gdal-bin Sudo apt-get install unzip

Erstellen Sie ein Verzeichnis, um die Zillow-Daten vorübergehend zu speichern, und kopieren Sie die Download-Skripts.

mkdir ~ / zillow cp /var/www/mapapp/docs/wget-zillow.txt ~ / zillow / wget-zillow

Passen Sie die Batchdatei an, um die Dateien für die gewünschten Zustände herunterzuladen (z. B. Kalifornien, Oregon, Washington oder alle). Führen Sie dann das Download-Skript aus. Dadurch werden alle gewünschten ZIP-Dateien von Zillow heruntergeladen:

bash wget-zillow

Bereiten Sie dann die MySQL-Importskripte vor:

cp /var/www/mapapp/docs/import-zillow.txt ~ / zillow / import-zillow kopiert /docs/import-zillow.txt nach ~ / zillow / import-zillow

Passen Sie die Liste der Zustände im Skript an, deren Shape-Dateien Sie in MySQL importieren möchten. Sie müssen außerdem den Datenbanknamen, die Berechtigungsnachweise und den Namen der Nachbarschaftstabelle in Ihrer lokalen Datei anpassen und das Skript ausführen. Dies wird das ogr2ogr-Tool verwenden, um die Formdateien (.shp) in MySQL zu importieren:

bash import-zillow

MapApp konfigurieren

Sie müssen die Datei /docs/config-mapapp.ini mit Ihren eigenen Einstellungen anpassen, insbesondere mit den MySQL-Zugriffseinstellungen:

mkdir / var / www / secure cd / var / www / secure #erinnerung: Die Namen werden unten von github auf den Server umgekehrt. cp /var/www/mapapp/docs/mapapp-config.ini / var / www / secure / config- mapapp.ini sudo nano config-mapapp.ini

Führen Sie dann die Migration der aktiven Datensatzdatenbank aus, um MapApp zu initialisieren. Datenbankmigrationen sind Teil des Yii Framework und dienen zur programmgesteuerten Erstellung von Tabellen und Schemata:

cd / var / www / mapapp ./app/protected/yiic migrieren

Geben Sie bei Aufforderung einen Benutzernamen, eine E-Mail-Adresse und ein Kennwort für Ihr Administratorkonto ein. Auf diese Weise melden Sie sich auf der MapApp-Homepage an.

Schließlich müssen Sie ein Skript ausführen, um die geografischen Koordinaten in der MySQL-Tabelle der Zillow-Nachbarschaften umzukehren. Besuchen Sie http://yourdomain.com/neighborhoods/reverse. Abhängig von der Anzahl der importierten Zillow-Statusdateien kann dies einige Minuten dauern. Ich habe festgestellt, dass ogr die Zillow-Breiten- und Längengraddaten in einer entgegengesetzten Koordinatenreihenfolge importiert, als Google Maps dies erfordert.

MapApp verwenden

Besuchen Sie Ihre Homepage unter http://mapapp.ihredomain.com. Melden Sie sich mit dem Benutzernamen und dem Kennwort an, die Sie während der Datenbankmigration erstellt haben.

Durchsuchen und Anzeigen von Nachbarschaftskarten

Durchsuchen Sie Ihre importierten Nachbarschaften und klicken Sie auf eine beliebige Ansicht. Der nächste Nachbarschaftslink macht es einfach, mehr als einen zu sehen. Sie können auch nach Namen, Stadt, Bundesland oder Landkreis suchen

Ich verwende die Yii-Erweiterung zBMap, um Google Maps mit den Zillow-Nachbarschafts-Polygondaten anzuzeigen. Jede PHP-Bibliothek für Google Maps oder JavaScript funktioniert jedoch genauso gut.

Das prepareMap Die Funktion im Neighborhoods-Modell fordert die Zillow-Polygondaten von der Datenbank sowie den Mittelpunkt der Nachbarschaft (als Zentroid bezeichnet) an. Wir verwenden den Schwerpunkt, um den Darstellungsbereich der Karte zu positionieren.

public function preparMap ($ id) $ pg = Yii :: app () -> db-> createCommand () -> select ('AsText (SHAPE) als Region, ASTEXT (Centroid (SHAPE)) als Zentrum') -> from (Yii :: app () -> getDb () -> tablePrefix.'neighborhoods ') -> where (' OGR_FID =: ogr_fid ', array (': ogr_fid '=> $ id)) -> queryRow (); Yii :: import ('ext.gmap. *'); $ gMap = neue EGMap (); $ gMap-> setJsName ('map_region'); $ gMap-> width = '500'; $ gMap-> height = '500'; $ gMap-> Zoom = 13; $ center = new stdClass; list ($ center-> lat, $ center-> lon) = $ this-> string_to_lat_lon ($ pg ['center']); $ gMap-> setCenter ($ center-> lat, $ center-> lon); $ coords = $ this-> string_to_coords ($ pg ['region']); $ polygon = neues EGMapPolygon ($ coords); $ gMap-> addPolygon ($ Polygon); return $ gMap; 

Die Controller-Ansicht "Neighborhoods" zeigt die Seite mit der Karte an:

öffentliche Funktion actionView ($ id) $ gMap = Neighborhoods :: model () -> preparMap ($ id); $ this-> render ('view', array ('model' => $ this-> loadModel ($ id), 'gMap' => $ gMap,)); 

HTML5-Geolocation verwenden

Klicken Sie in der Navigationsleiste auf Geolocation, um Ihre Nachbarschaft anhand Ihrer WLAN-Adresse zu ermitteln. Dies funktioniert nicht über Mobilfunk. 

Sie müssen Ihrem Browser möglicherweise die Erlaubnis zur Geolocation erteilen, damit diese Funktion funktioniert (suchen Sie unter der Adressleiste nach einem Popup)..

Dann können Sie auf die Option Standort automatisch suchen klicken:

Manchmal müssen Sie eine Aktualisierung durchführen, um die richtige Antwort zu erhalten, nachdem Sie die Erlaubnis erteilt haben - oder von bestimmten WLAN-Standorten. Wir verwenden das Geopositionsskript von estebanav, um HTML5-Geolocation mit der größtmöglichen Browserunterstützung zu unterstützen.

Sobald Ihr Standort gefunden wurde, zeigen wir Ihren Standort auf einer Karte mit Ihrer Zillow-Nachbarschaft sowie Geokodierungsinformationen, die unabhängig voneinander gesucht wurden.

Wir verwenden die eGeocoding-Erweiterung von Yii, um zusätzliche Daten zu Ihrem Standort abzurufen. Dies dient hauptsächlich dazu, zusätzliche Datenquellen anzuzeigen, die Sie über die Zillow-Randdaten hinaus verwenden können.

öffentliche Funktion actionIndex () $ model = new Geolocation (); if (isset ($ _ POST ['Geolocation'])) $ info = Yii :: app () -> Geocoder-> reverse ($ _ POST ['Geolocation'] ['lat'], $ _ POST ['Geolocation']) ['lon']); $ gps_for_sql = "Point (". $ _ POST ['Geolocation'] ['lat']. "". $ _ POST ['Geolocation'] ['lon']. ")"; $ neighborhood = Neighborhoods :: model () -> lookupFromLatLon ($ gps_for_sql); $ gMap = Neighborhoods :: model () -> preparMap ($ neighborhood ['OGR_FID']); $ marker = new EGMapMarkerWithLabel ($ _ POST ['Geolocation'] ['lat'], $ _ POST ['Geolocation'] ['lon'], array ('title' => 'Sie sind hier!')); $ gMap-> addMarker ($ marker); $ gMap-> width = '400'; $ gMap-> height = '400'; $ this-> render ('view', array ('data' => $ neighborhood, 'info' => $ info, 'gMap' => $ gMap));  else $ this-> render ('index', array ('model' => $ model)); 

Weitergehen

Wenn Sie mehr sehen möchten, einschließlich des Zeichnens Ihrer eigenen Regionskarten, probieren Sie mein Nebenprojekt Geogram aus. Sie können E-Mail-basierte Communities in der Nähe von Stadtteilen, von Nutzern erstellten Regionen, Orten und im Google Places-Verzeichnis erstellen.

Geogram verfügt über eine Reihe erweiterter Mapping- und E-Mail-Funktionen. Wenn Sie an einem Tutorial zur Verwendung der Mailgun-E-Mail-API durch Geogram interessiert sind, lesen Sie unter Wie Geogram einen kostenlosen Gruppen-E-Mail-Dienst mit Yii für PHP mit MySQL erstellt hat. Möglicherweise schreibe ich ein Tutorial zum Zeichnen von Regionen für Google Maps in der Zukunft. Schreiben Sie unten einen Kommentar, wenn Sie das lesen möchten. Möglicherweise interessieren Sie sich auch für einige meiner anderen auf Yii basierenden Tutorials. Ich werde in Kürze eine Einführung in das Yii Framework für Tuts + schreiben.

Bitte zögern Sie nicht, Korrekturen, Fragen oder Kommentare zu posten. Sie können mich auch auf Twitter @reifman erreichen oder mich direkt per E-Mail kontaktieren.