Comment utiliser les cartes de quartier Zillow et la géolocalisation HTML5

Ce que vous allez créer

Il y a quelques années, Zillow a publié ses fichiers de limites de quartier pour les États-Unis sous licence Creative Commons Sharealike 3.0. C'est une excellente ressource. Si vous êtes intéressé par des cartes pour d'autres pays, consultez OpenStreetMaps.. 

Cependant, si vous n'avez jamais utilisé de fichiers de formes géographiques auparavant, il peut être un peu déroutant de savoir comment intégrer les données cartographiques de Zillow dans votre propre application..

J'ai développé une application de démonstration gratuite et open source, MapApp, pour montrer comment utiliser les limites du quartier Zillow et les intégrer à Google Maps, à la géolocalisation et au géocodage..

MapApp est construit à l'aide du framework Yii et peut être exécuté sur tout serveur compatible MySQL et PHP. MapApp exploite également l'API Google Maps, l'aide de géolocalisation HTML5 d'estebanav, eGeocoder et egMap (les deux derniers sont des extensions Yii)..

Configurer votre serveur

Pour commencer, vous pouvez trouver le code MapApp sur GitHub. Suivez les étapes d’installation qui ont été testées pour Ubuntu 14.04 chez Digital Ocean mais qui devraient fonctionner avec n’importe quelle version de LAMP..

Vous pouvez soit cloner le référentiel, soit en télécharger une copie. Configurez le site Apache (comme décrit dans les étapes d'installation) et redémarrez Apache..

Le processus prend environ 45 à 60 minutes. Il y a beaucoup à configurer: configuration de votre serveur, de votre DNS, décompression du code, configuration de votre serveur Apache, de votre base de données MySQL, installation du fichier de configuration, exécution de la migration active des enregistrements, installation des bibliothèques de mappage, téléchargement et importation et réglage du logiciel Zillow. Les données. 

Si vous souhaitez gagner du temps, je vous propose une image préconfigurée de MapApp pour Digital Ocean. Cependant, vous en apprendrez plus si vous suivez toutes les étapes vous-même..

Préparer les données du quartier de Zillow

Une fois que vous avez créé votre base de données MySQL pour MapApp, il est temps de récupérer les données Zillow..

Installez les bibliothèques d’abstraction de données géospatiales et décompressez:

sudo apt-get installer gdal-bin sudo apt-get installer unzip

Créez un répertoire pour stocker temporairement les données Zillow et copiez les scripts de téléchargement.

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

Personnalisez le fichier de commandes pour télécharger les fichiers pour les états de votre choix (par exemple, Californie, Oregon, Washington ou tous). Ensuite, exécutez le script de téléchargement. Cela téléchargera tous les fichiers zip souhaités à partir de Zillow:

bash wget-zillow

Ensuite, préparez les scripts d'importation MySQL:

cp /var/www/mapapp/docs/import-zillow.txt ~ / zillow / import-zillow copie /docs/import-zillow.txt vers ~ / zillow / import-zillow

Personnalisez la liste des états du script dont vous souhaitez importer les fichiers de forme dans MySQL. Vous devrez également personnaliser le nom de la base de données, les informations d'identification et le nom de la table de voisinage dans votre fichier local, puis exécuter le script. Cela utilisera l'outil ogr2ogr pour importer les fichiers de formes (.shp) dans MySQL:

bash import-zillow

Configuration de MapApp

Vous devrez personnaliser le fichier /docs/config-mapapp.ini avec vos propres paramètres, en particulier les paramètres d'accès à MySQL:

mkdir / var / www / secure cd / var / www / secure #note: les noms sont inversés ci-dessous de github vers le serveur cp /var/www/mapapp/docs/mapapp-config.ini / var / www / secure / config- mapapp.ini sudo nano config-mapapp.ini

Ensuite, exécutez la migration de la base de données d'enregistrement active pour initialiser MapApp. Les migrations de bases de données font partie du framework Yii et permettent de créer des tables et des schémas de manière programmatique:

cd / var / www / mapapp ./app/protected/yiic migrer vers le haut

Lorsque vous y êtes invité, entrez un nom d'utilisateur, une adresse électronique et un mot de passe pour votre compte d'administrateur. C'est ce que vous utiliserez pour vous connecter à la page d'accueil de MapApp..

Enfin, vous devrez exécuter un script pour inverser les coordonnées géographiques dans la table MySQL des quartiers de Zillow. Rendez-vous sur http://votredomaine.com/voisonnages/reverse. En fonction du nombre de fichiers d'état Zillow que vous avez importés, cela peut prendre quelques minutes. J'ai constaté que ogr importait les données de latitude et de longitude de Zillow dans un ordre de coordonnées opposé à celui de Google Maps..

Utiliser MapApp

Visitez votre page d'accueil à l'adresse http://mapapp.votredomaine.com. Connectez-vous avec le nom d'utilisateur et le mot de passe que vous avez créés lors de la migration de la base de données..

Parcourir et afficher des cartes de voisinage

Parcourez vos quartiers importés et cliquez sur ceux que vous souhaitez voir. Le lien de voisinage suivant permet d’en voir plus d’un. Vous pouvez également rechercher par nom de quartier, ville, état ou comté

J'utilise l'extension Yii egMap pour afficher Google Maps à l'aide des données de polygone de voisinage de Zillow. Cependant, toute bibliothèque PHP pour Google Maps ou JavaScript fonctionnera aussi bien.

le prepareMap function dans le modèle Neighborhoods demande les données de polygone de Zillow à la base de données ainsi que le point central du voisinage (appelé centroïde). Nous utilisons le centre de gravité pour positionner la fenêtre d'affichage de la carte..

fonction publique prepareMap ($ id) $ pg = Yii :: app () -> db-> createCommand () -> select ('AsText (SHAPE) en tant que région, ASTEXT (Centroid (SHAPE)) en tant que centre') -> from (Yii :: app () -> getDb () -> tablePrefix.'neighborhoods ') -> where (' OGR_FID =: ogr_fid ', array (': ogr_fid '=> $ id)) -> queryRow (); Yii :: import ('ext.gmap. *'); $ gMap = new 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 ($ centre-> lat, $ centre-> lon); $ coords = $ this-> string_to_coords ($ pg ['region']); $ polygone = new EGMapPolygon ($ coords); $ gMap-> addPolygon ($ polygon); return $ gMap; 

L'action d'affichage du contrôleur Quartiers rend la page avec la carte:

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

Utiliser HTML5 Géolocalisation

Cliquez sur Géolocalisation dans la barre de navigation pour localiser votre quartier à partir de votre adresse WiFi. Cela ne fonctionnera pas via cellulaire. 

Vous aurez probablement besoin d'autoriser votre navigateur à autoriser la géolocalisation pour que cette fonctionnalité fonctionne (recherchez une fenêtre contextuelle sous la barre d'adresse)..

Ensuite, vous pourrez cliquer sur l’option Rechercher votre position automatiquement:

Parfois, vous aurez besoin d'actualiser pour obtenir la réponse correcte après avoir accordé l'autorisation - ou à partir de certains emplacements WiFi. Nous utilisons le script de positionnement d’estebanav pour prendre en charge la géolocalisation HTML5 avec la plus grande compatibilité de navigateur possible..

Une fois votre position trouvée, nous vous indiquerons votre position sur une carte avec votre quartier de Zillow ainsi que des informations de géocodage recherchées indépendamment.

Nous utilisons l'extension Yii eGeocoding pour rechercher des données supplémentaires sur votre emplacement. Ceci est principalement destiné à montrer des sources de données supplémentaires que vous pouvez utiliser au-delà des données de la limite de Zillow..

fonction publique actionIndex () $ model = new Geolocation (); if (isset ($ _ POST ['Géolocalisation'])) $ info = Yii :: app () -> geocoder-> reverse ($ _ POST ['Géolocalisation'] ['lat'], $ _ POST ['Géolocalisation'] ['lon']); $ gps_for_sql = "Point (". $ _ POST ['Géolocalisation'] ['lat']. "". $ _ POST ['Géolocalisation'] ['lon']. ")"; $ quartier = quartiers :: modèle () -> lookupFromLatLon ($ gps_for_sql); $ gMap = Neighborhoods :: model () -> prepareMap ($ voisinage ['OGR_FID']); $ marker = new EGMapMarkerWithLabel ($ _ POST ['Géolocalisation'] ['lat'], $ _ POST ['Géolocalisation'] ['lon'], array ('title' => 'Vous êtes ici!')); $ gMap-> addMarker (marqueur $); $ gMap-> width = '400'; $ gMap-> height = '400'; $ this-> render ('view', array ('data' => $ voisinage, 'info' => $ info, 'gMap' => $ gMap));  else $ this-> render ('index', array ('modèle' => $ modèle)); 

Aller plus loin

Si vous souhaitez en voir plus, y compris dessiner vos propres cartes de régions, essayez mon projet parallèle, Geogram. Il vous permet de créer des communautés utilisant la messagerie électronique autour des quartiers, des régions créées par l'utilisateur, des lieux et du répertoire Google Adresses..

Geogram possède un certain nombre de fonctionnalités de cartographie et de messagerie étendues. Si vous êtes intéressé par un didacticiel sur l'utilisation de l'API de messagerie Mailgun par Geogram, lisez Comment Geogram a créé un service de messagerie électronique de groupe gratuit utilisant Yii pour PHP avec MySQL. J'écrirai peut-être un tutoriel sur les régions de dessin pour Google Maps à l'avenir - postez un commentaire ci-dessous si vous souhaitez le lire. Certains de mes autres tutoriels basés sur Yii pourraient également vous intéresser. Je vais écrire une introduction au framework Yii pour Tuts + bientôt.

N'hésitez pas à poster des corrections, des questions ou des commentaires ci-dessous. Vous pouvez également me joindre sur Twitter @reifman ou m'envoyer un email directement.