Cum se utilizează Hărți din vecinătate Zillow și Geolocație HTML5

Ce veți crea

Cu câțiva ani în urmă, Zillow și-a lansat dosarele de graniță pentru Statele Unite prin intermediul licenței Creative Commons Sharealike 3.0. Este o mare resursă. Dacă sunteți interesat de hărți pentru alte țări, consultați OpenStreetMaps. 

Cu toate acestea, dacă nu ați utilizat anterior fileformații geografice, poate fi puțin confuză cu privire la modul de integrare a datelor de hartă ale lui Zillow în propria aplicație.

Am construit o aplicație demo gratuită, open source, MapApp, pentru a demonstra cum să folosești granițele cartierului Zillow și să le integrezi cu Google Maps, geolocația și geocodarea.

MapApp este construit folosind framework-ul Yii și poate fi rulat pe orice server MySQL, capabil de PHP. MapApp utilizează, de asemenea, API-ul Google Maps, ajutorul helper Geolocation de la isbanav, eGeocoder și egMap (ultimele două sunt extensii Yii).

Configurarea serverului

Pentru a începe, puteți găsi codul MapApp pe GitHub. Urmați pașii de instalare care au fost testați pentru Ubuntu 14.04 la Digital Ocean, dar ar trebui să funcționeze cu orice versiune a LAMP.

Puteți fie să clonați depozitul, fie să descărcați o copie. Configurați site-ul Apache (așa cum este descris în pașii de instalare) și reporniți Apache.

Procesul durează aproximativ 45-60 de minute. Există multe setări: configurarea serverului, DNS, despachetarea codului, configurarea serverului dvs. Apache, a bazei dvs. de date MySQL, instalarea fișierului de configurare, rularea migrării activă a înregistrărilor, instalarea bibliotecilor de mapare, descărcarea și importul și ajustarea Zillow date. 

Dacă doriți să economisiți timp, vă ofer o imagine pre-configurată a MapApp pentru Digital Ocean. Cu toate acestea, veți afla mai multe dacă faceți singur toate etapele.

Pregătiți datele din vecinătatea Zillow

Odată ce ați creat baza de date MySQL pentru MapApp, este timpul să obțineți datele Zillow.

Instalați Bibliotecile de Abstractizare a datelor geospațiale și dezarhivați:

sudo apt-get instala gdal-bin sudo apt-get instala unzip

Creați un director pentru stocarea temporară a datelor din Zillow și copierea scripturilor de descărcare.

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

Personalizați fișierul batch pentru a descărca fișierele pentru stările pe care le doriți (de exemplu, California, Oregon, Washington sau toate). Apoi, executați scriptul de descărcare. Aceasta va descărca toate fișierele zip dorite de la Zillow:

bash wget-zillow

Apoi, pregătiți scripturile de import MySQL:

cp /var/www/mapapp/docs/import-zillow.txt ~ / zillow / import-zillow copia /docs/import-zillow.txt la ~ / zillow / import-zillow

Personalizați lista de stări din scriptul a cărui fișiere de formă doriți să le importați în MySQL. De asemenea, va trebui să personalizați numele bazei de date, numele acreditărilor și numele tabelului de vecinătate în fișierul local și să rulați scriptul. Acest lucru va folosi instrumentul ogr2ogr pentru a importa fișierele de formă (.shp) în MySQL:

bash import-zillow

Configurarea MapApp

Va trebui să personalizați fișierul /docs/config-mapapp.ini cu propriile setări, în special setările de acces MySQL:

mkdir / var / www / secure cd / var / www / secure #note: numele sunt inversate mai jos de la github la server cp /var/www/mapapp/docs/mapapp-config.ini / var / www / secure / mapapp.ini sudo nano config-mapapp.ini

Apoi, rulați migrarea activă a bazei de date pentru a inițializa MapApp. Migrațiile bazei de date fac parte din cadrul Yii și servesc la crearea tabelelor și schemelor într-un mod programatic:

cd / var / www / mapapp ./app/protected/yiic migrați în sus

Când vi se solicită, introduceți un nume de utilizator, un e-mail și o parolă pentru contul de administrator. Aceasta este ceea ce veți utiliza pentru a vă conecta la pagina de pornire a MapApp.

În cele din urmă, va trebui să executați un script pentru a inversa coordonatele geografice din tabelul MySQL din cartierele Zillow. Vizitați http://yourdomain.com/neighborhoods/reverse. În funcție de numărul de fișiere de stare din Zillow pe care le-ați importat, acest lucru ar putea dura câteva minute. Am descoperit că ogr importă datele de latitudine și longitudine Zillow într-o ordine de ordine inversă decât necesită Hărți Google.

Utilizarea MapApp

Vizitați pagina dvs. de pornire la http://mapapp.yourdomain.com. Conectați-vă cu numele de utilizator și parola pe care le-ați creat în timpul migrării bazei de date.

Navigarea și vizualizarea hărților de vecinătate

Răsfoiți cartierele importate și faceți clic pe oricare dintre ele doriți să le vizualizați. Următoarea legătură în vecinătate facilitează vizionarea a mai mult de una. De asemenea, puteți căuta după numele, orașul, statul sau județul

Folosesc extensia Yii egMap pentru a afișa Google Maps utilizând datele poligonului cartierului Zillow. Cu toate acestea, orice bibliotecă PHP pentru Google Maps sau JavaScript va funcționa la fel de bine.

prepareMap funcția din modelul Neighborhoods solicită datele poligonului Zillow din baza de date, precum și punctul central al cartierului (numit centroid). Utilizăm centroidul pentru a poziționa portul de vizualizare al hărții.

funcția publică prepareMap ($ id) $ pg = Yii :: app () -> db-> createCommand () -> selectați (AsText (SHAPE) ca regiune, ASTEXT (Centroid (SHAPE) de la (Yii :: app () -> getDb () -> tablePrefix.'neighborhoods)) -> unde ('OGR_FID =: ogr_fid', array (': ogr_fid' => $ id)) -> queryRow (); Yii :: import ( 'ext.gmap *.'); $ gMap = noul 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 ['regiune']); $ poligon = EGMapPolygon nou ($ coords); $ GMap-> addPolygon ($ poligon); returnează $ gMap; 

Afișarea acțiunii controlerului din vecinătate face ca pagina să fie afișată cu harta:

funcția publică funcțiaView ($ id) $ gMap = Cartiere :: model () -> prepareMap ($ id); $ this-> render ('vizualizare', array ('model' => $ this-> loadModel ($ id), 'gMap' => $ gMap,)); 

Utilizarea localizării în HTML5

Faceți clic pe Geolocation în bara de navigare pentru a localiza cartierul dvs. de pe adresa dvs. WiFi. Acest lucru nu va funcționa prin celular. 

Probabil că va trebui să acordați permisiunea browserului dvs. pentru localizarea geografică pentru ca această funcție să funcționeze (căutați un pop-up de sub bara de adrese).

Apoi, veți putea să faceți clic pe opțiunea Căutarea locației dvs. automat:

Uneori va trebui să reîmprospătați pentru a obține răspunsul corect după acordarea permisiunii - sau din anumite locații WiFi. Folosim scriptul de geopoziție de la estebanav pentru a suporta Geometria HTML5 cu ajutorul celui mai extins suport de browser.

După găsirea locației dvs., vă vom arăta locația pe o hartă cu cartierul dvs. Zillow, precum și informațiile despre geocodare, care au căutat independent.

Utilizăm extensia Yii eGeocoding pentru a căuta date suplimentare despre locația dvs. Acest lucru este în principal pentru a arăta surse suplimentare de date pe care le puteți utiliza dincolo de datele limită Zillow.

funcția publică funcțieIndex () $ model = new Geolocation (); dacă isset ($ _ POST ['Geolocation'])) $ info = Yii :: app () -> geocoder-> inversă ($ _ POST ['Geolocation'] ['lat'], $ _ POST ['Geolocation'] [ 'lon']); $ gps_for_sql = "Punctul (". $ _ POST ['Geolocation'] ['lat']. "" $ _ POST ['Geolocation']. $ neighborhood = Cartiere :: model () -> lookupFromLatLon ($ gps_for_sql); $ gMap = Cartiere :: model () -> prepareMap ($ neighborhood ['OGR_FID']); $ marker = new EGMapMarkerWithLabel ($ _ POST ['Geolocation'] ['lat'], $ _ POST ['Geolocation'] ['lon'], array ('title' => 'You are here! $ GMap-> addMarker ($ markerul); $ gMap-> width = '400'; $ gMap-> height = '400'; $ this-> render ('vedere', array ('data' => $ cartier, 'info' => $ info, 'gMap' => $ gMap));  altceva $ this-> render ('index', array ('model' => model $)); 

Mergând mai departe

Dacă doriți să vedeți mai multe, inclusiv desenarea propriilor hărți ale regiunii, încercați un proiect lateral, Geogram. Acesta vă permite să creați comunități cu e-mail în jurul cartierelor, regiunilor create de utilizatori, locații și directorul Google Locații.

Geograma are un număr mare de funcții de mapare și e-mail extinsă. Dacă sunteți interesat de un tutorial despre utilizarea de către Geogram a API-ului de poștă electronică Mailgun, citiți Cum a construit Geogram un serviciu gratuit de e-mail de grup folosind Yii pentru PHP cu MySQL. S-ar putea să scriu un tutorial despre desenarea regiunilor pentru Google Maps în viitor - postați un comentariu mai jos dacă vreți să citiți acest lucru. S-ar putea să fiți interesat, de asemenea, de unele dintre celelalte tutoriale ale mele Yii. Voi scrie o introducere cadru pentru Yii pentru Tuts + în curând.

Nu ezitați să postați corecturi, întrebări sau comentarii de mai jos. Puteți să mă contactați și pe Twitter @reifman sau să mă trimiteți direct prin e-mail.

Cod