Het gebruik van Zillow Neighborhood Maps en HTML5 Geolocation

Wat je gaat creëren

Een paar jaar geleden bracht Zillow via de Creative Commons Sharealike 3.0-licentie de bestanden met de naburige grenzen voor de Verenigde Staten uit. Het is een geweldige bron. Als je geïnteresseerd bent in kaarten voor andere landen, bekijk dan OpenStreetMaps. 

Als u echter nog niet eerder gebruik hebt gemaakt van geografische shapefiles, kan het een beetje verwarrend zijn hoe u de kaartgegevens van Zillow kunt integreren in uw eigen applicatie.

Ik heb een gratis, open source demotoepassing, MapApp, gebouwd om te demonstreren hoe de buurtgrenzen van Zillow te gebruiken en ze te integreren met Google Maps, geolocatie en geocodering.

MapApp is gebouwd met behulp van het Yii Framework en kan worden uitgevoerd op elke MySQL, PHP-capabele server. MapApp maakt ook gebruik van de Google Maps API, HTML5 Geolocation helper van estebanav, eGeocoder en egMap (de laatste twee zijn Yii-extensies).

Uw server instellen

Om te beginnen, kun je de MapApp-code vinden op GitHub. Volg de installatiestappen die zijn getest voor Ubuntu 14.04 bij Digital Ocean, maar zou moeten werken met elke versie van LAMP.

U kunt de repository klonen of een kopie downloaden. Configureer de Apache-site (zoals beschreven in de installatiestappen) en start Apache opnieuw.

Het proces duurt ongeveer 45 tot 60 minuten. Er is veel wat u kunt instellen: uw server configureren, uw DNS, de code uitpakken, uw Apache-server instellen, uw MySQL-database, het configuratiebestand installeren, de actieve recordmigratie uitvoeren, de mapping-bibliotheken installeren, de Zillow downloaden en importeren en aanpassen gegevens. 

Als u tijd wilt besparen, bied ik een vooraf geconfigureerd beeld van MapApp voor Digital Ocean aan. U leert echter meer als u zelf alle stappen doorloopt.

Bereid de buurtgegevens van Zillow voor

Nadat u uw MySQL-database voor MapApp hebt gemaakt, is het tijd om de Zillow-gegevens te ontvangen.

Installeer de Geospatial Data Abstraction Libraries en unzip:

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

Maak een map om de Zillow-gegevens tijdelijk op te slaan en de downloadscripts te kopiëren.

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

Pas het batchbestand aan om de bestanden te downloaden voor de gewenste staten (bijvoorbeeld Californië, Oregon, Washington of alle). Voer vervolgens het downloadscript uit. Hiermee download je alle gewenste zip-bestanden van Zillow:

bash wget-zillow

Bereid vervolgens de MySQL-import-scripts voor:

cp /var/www/mapapp/docs/import-zillow.txt ~ / zillow / import-zillow copy /docs/import-zillow.txt naar ~ / zillow / import-zillow

Pas de lijst met staten in het script aan waarvan u de vormbestanden wilt importeren in MySQL. U moet ook de databasenaam, de inloggegevens en de naam van de buurttabel in uw lokale bestand aanpassen en het script uitvoeren. Hiermee wordt de tool ogr2ogr gebruikt om de shape (.shp) -bestanden te importeren in MySQL:

bash import-zillow

MapApp configureren

U moet het bestand /docs/config-mapapp.ini aanpassen met uw eigen instellingen, met name de MySQL-toegangsinstellingen:

mkdir / var / www / secure cd / var / www / secure #note: namen worden hieronder omgekeerd van github naar de server cp /var/www/mapapp/docs/mapapp-config.ini / var / www / secure / config- mapapp.ini sudo nano config-mapapp.ini

Voer vervolgens de actieve migratie van de recorddatabase uit om MapApp te initialiseren. Databasemigraties maken deel uit van het Yii Framework en dienen om op een programmatische manier tabellen en schema's te maken:

cd / var / www / mapapp ./app/protected/yiic migreren naar boven

Voer desgevraagd een gebruikersnaam, e-mailadres en wachtwoord in voor uw beheerdersaccount. Dit is wat u zult gebruiken om in te loggen op de startpagina van MapApp.

Ten slotte moet u een script uitvoeren om de geografische coördinaten in de MySQL-tabel in de buurt van Zillow om te keren. Ga naar http://yourdomain.com/neighborhoods/reverse. Afhankelijk van het aantal Zillow-statusbestanden dat u hebt geïmporteerd, kan dit enkele minuten duren. Ik heb geconstateerd dat ogr de gegevens van de breedte- en lengtegraad van Zillow importeert in een tegenovergestelde coördinatenvolgorde dan Google Maps vereist.

MapApp gebruiken

Ga naar uw startpagina op http://mapapp.uwdomein.com. Meld u aan met de gebruikersnaam en het wachtwoord dat u tijdens de databasemigratie hebt gemaakt.

Browsen en bekijken van buurtkaarten

Blader door uw geïmporteerde buurten en klik op een bestand dat u wilt bekijken. De volgende link naar de buurt maakt het gemakkelijk om er meer dan één te zien. U kunt ook zoeken op naam, stad, provincie of provincie

Ik gebruik de Yii-extensie, bijvoorbeeld Map, om Google Maps weer te geven met behulp van de polygoongegevens in de buurt van Zillow. Elke PHP-bibliotheek voor Google Maps of JavaScript werkt echter net zo goed.

De prepareMap functie in het model Wijken verzoekt de Zglow-polygoongegevens uit de database en het middelpunt van de buurt (centreer genoemd). We gebruiken het zwaartepunt om de viewport van de kaart te positioneren.

openbare functie prepareMap ($ id) $ pg = Yii :: app () -> db-> createCommand () -> select ('AsText (SHAPE) als regio, ASTEXT (Centroid (SHAPE)) als middelpunt') -> from (Yii :: app () -> getDb () -> tablePrefix.'neighborhoods ') -> where (' OGR_FID =: ogr_fid ', array (': ogr_fid '=> $ id)) -> queryRow (); Yii :: import ( 'ext.gmap *.'); $ gMap = nieuwe EGMap (); $ GMap-> setJsName ( 'map_region'); $ gMap-> width = '500'; $ gMap-> height = '500'; $ gMap-> zoom = 13; $ center = new stdClass; lijst ($ 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 = new EGMapPolygon ($ coords); $ GMap-> addPolygon ($ polygoon); return $ gMap; 

De weergave Acties van buurmanegmenten geeft de pagina met de kaart weer:

public function actionView ($ id) $ gMap = Neighborhoods :: model () -> prepareMap ($ id); $ this-> render ('view', array ('model' => $ this-> loadModel ($ id), 'gMap' => $ gMap,)); 

HTML5 Geolocation gebruiken

Klik op Geolocatie in de navigatiebalk om uw buurt te lokaliseren vanaf uw WiFi-adres. Dit werkt niet via mobiel. 

U moet waarschijnlijk uw browser toestemming geven voor geolocatie om deze functie te laten werken (zoek naar een pop-up onder de adresbalk).

Vervolgens kunt u op de optie Automatisch opzoeken van uw locatie klikken:

Soms moet je het vernieuwen om het juiste antwoord te krijgen na het verlenen van toestemming - of van bepaalde wifi-locaties. We gebruiken het geoposition-script van estebanav om HTML5 Geolocation te ondersteunen met de breedst mogelijke browserondersteuning.

Zodra uw locatie is gevonden, laten we uw locatie zien op een kaart met uw buurt in Zillow en wordt informatie over geocodering onafhankelijk opgezocht.

We gebruiken de Yii eGeocoding-extensie om aanvullende gegevens over uw locatie op te zoeken. Dit is voornamelijk om extra gegevensbronnen weer te geven die u kunt gebruiken buiten de grensgegevens van Zillow.

public function actionIndex () $ model = nieuwe 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 = Wijken :: model () -> prepareMap ($ neighborhood ['OGR_FID']); $ marker = new EGMapMarkerWithLabel ($ _ POST ['Geolocation'] ['lat'], $ _ POST ['Geolocation'] ['lon'], array ('title' => 'U bent 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)); 

Verder gaan

Als je meer wilt zien, inclusief het tekenen van je eigen regiokaarten, probeer dan mijn zijproject, Geogram. Hiermee kunt u door e-mail gevoede community's rond buurten, door de gebruiker gemaakte regio's, plaatsen en de Google Places-map maken.

Geogram heeft een aantal uitgebreide mapping- en e-mailfuncties. Als u geïnteresseerd bent in een tutorial over het gebruik van de mailgun-API door Geogram, lees dan hoe Geogram een ​​gratis e-mailservice voor groepen heeft gebouwd met Yii voor PHP met MySQL. Ik kan in de toekomst een tutorial schrijven over tekenregio's voor Google Maps - plaats een opmerking hieronder als je dat wilt lezen. Mogelijk bent u ook geïnteresseerd in enkele van mijn andere op Yii gebaseerde handleidingen. Ik zal binnenkort een Yii Framework-introductie voor Tuts + gaan schrijven.

Aarzel niet om correcties, vragen of opmerkingen hieronder te plaatsen. Je kunt me ook bereiken via Twitter @reifman of mij rechtstreeks een e-mail sturen.