Google, Flex, Buddyress et WordPress – Interfacer BuddyPress et Google Map API sous Flex
Il s’agit de cartographier les membres d’un réseau social géré sous BuddyPress à l’aide de Flex et de la Google Map API. Voilà enfin une affaire sérieuse dont il va être question… En effet, tracer, localiser… (Espionner ?) Les personnes à l’aide de l ‘API Google Maps ! Bref superposer la réalité virtuelle à une réalité physique (forcément plus décevante !) mais les faits sont têtus a dit Lénine, on ne peut donc d’un manière ou d’une autre échapper à notre condition de bipédie et de sédentarité quoiqu’en dise les chantres de la mobilité. Comme la chèvre, on laisse toujours des petites crottes derrière soi fussent-elles numériques !
Dans cet article, on va donc voir comment se servir de l’API Google Maps, l’interfacer avec une application Flex puis creuser le filon afin de trouver une piste pour brancher le tout sur un réseau social géré sous BuddyPress en s’appuyant sur le champs base du profil de l’utilisateur.
NDLR : Un propos qui n’engage que son auteur, la sédentarité n’est-t-elle à l’origine de la culture (cf les bibliothèques) alors que la mobilité physique et moderne (je ne parle pas de l’errance tsigane ou des bushmen, je pense plutôt aux migrants chinois de WebDocumenaire de Samuel Bollendorff Cf http://www.lemonde.fr/asie-pacifique/visuel/2008/11/17/voyage-au-bout-du-charbon_1118477_3216.html ou au monde des excités de la mobilité, décrit par Pico Iyer dans The Global Soul: Jet Lag, Shopping Malls, and the Search for Home, qui date un peu désormais). Cette mobilité, c’est bien la barbarie de l’instant présent :):)
Préparer son plan google….
Obtenir une API KEY pour Google Maps
Vous devez vous rendre sur l’url principal de l’API Google http://code.google.com/intl/fr/apis/maps/. Il vous suffit de donner d’ennregistrer un nom de domaine pour obtenir une clé pur faire fonctionner l’API google sur le site de votre choix. Dans notre exemple, voici la clé ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc_PC6mtqjHFWwOLDbePFpwWjAg pour API key for
hemedia.net subscribed at info@hecube.net
Thank You for Signing Up for a Google Maps API Key!
Your key is:
ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc
_PC6mtqjHFWwOLDbePFpwWjAgThis key is good for all URLs consisting of this registered domain (and directory if applicable):
http://hemedia.net/
La clé API a été “scindé” afin de pouvoir tenir dans notre article.
Télécharger le fichier map_flex_1_16.swc
Il faut télécharger le “couteau suisse” donnée par google pour intégrer l’API Google Map dans Flex. http://maps.googleapis.com/maps/flash/release/sdk.zip
Ce fichier va permettre de faire appel au sein de Flex aux propriétés de l’API Google
Connaître les coordonnées géographiques d’un lieu (latitude et longitude)
Avant d’interfacer notre application Flex avec la BDD de données. Celle-ci doit contenir les coordonnées géographiques (latitude et longitude) d’un lieu mais il faut pouvoir déterminer ces coordonnées.
Le code source du fichier pour obtenir les coordonnées géographiques d’un lieu google_api_coord_hecube.html. On a placé quelques remarques en commentaires dans le code pour comprendre un peu mieux les éléments importants du code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Hecube.net _ Google Map - Trouver les coordonnées géographiques (latitude et longitude) d'un lieu</title>
<!-- La Google Maps API Key vient dans la balise script -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAbr0JY20cqFgvd3EtzjX8xRRi_j0U6kJrkFvY4-OX2XYmEAa76BQRTZkoVHkXJUpOizoXkhUFxW1L6Q" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var geocoder = null;
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) { alert(address + " not found"); }
else {
/* La valeur setCenter est apparament comprise entre 1 -> 23, ils'agit du zoom sur la carte */
map.setCenter(point, 16);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
/* G_HYBRID_MAP => photo ou G_HYBRID_TYPE => carte */
map.setMapType( G_HYBRID_MAP );
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
document.getElementById("latLng").innerHTML="<p>Latitude and Longitude: <font color="red">" + point + "</font></p>"
}
}
);
}
}
function load() {
/* Lieu chargé par défaut lors du chargement de la page */
var address="Paris"
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
showAddress(address);
document.getElementById("address").value=address
// Trigger for moveend event
GEvent.addListener(
map, 'moveend',
function() {
// Display current map center
document.getElementById("latLng").innerHTML="<p>Latitude and Longitude: <font color="red">" + map.getCenter() + "</font></p>"
}
)
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>Pour trouver les coordonnées géographiques (latitude et longitude) d'un lieu, il vous suffit de taper le nom du lieu (ville, village...etc.)</p>
<p><i>Il peut exister quelques "ratés", en effet certains lieux peuvent ne pas être localisés !</i></p>
<p>
<input type="text" size="60" name="address" id="address" value="" />
<input type="submit" value="Go!" />
</p>
<div id="latLng"></div>
<div id="map" style="width: 800px; height: 480px"></div>
</form>
</body>
</html> |
La structure la BDD qui va stocker les coordonnées géographiques
Le fichier “dump” .sql pour la creation de la BDD qui va être interfacé avec notre application Flex via un fichier de génération de xml écrit en php
Nous travaillons en local à l’aide d’un serveur MAMP. Pour installer un environnement similaire reportez-vous aux articles suivants de ce blog :
Pour comprendre comment installer cet environnement PHP-MySQL, reportez-vous aux articles de ce blog :
La structure de la BDD flex_mapgoogle dans laquelle a été inséré quelques lieux.
-- -- Base de données: flex_mapgoogle -- DROP TABLE IF EXISTS maps; CREATE TABLE IF NOT EXISTS maps ( id INT(11) NOT NULL AUTO_INCREMENT, lat FLOAT, lon FLOAT, name VARCHAR(255), PRIMARY KEY (id), FULLTEXT KEY searching (name) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ; -- -- Contenu de la table movies_list_index -- -- Ville Latitude Longitude -- Mendoza -32.890183 -68.8440498 -- Alice Springs -23.700358 133.880889 -- Pau 43.297521 -0.3743618 -- Plock 52.5463446 19.7065364 -- Medina 24.460899 39.62019 -- Courbevoie 48.8968248 2.2565154 -- Paris 48.8566667 2.3509871 INSERT INTO maps VALUES (0, -32.8902, -68.844, 'Mendoza'); INSERT INTO maps VALUES (0, -23.7004, 133.881, 'Alice Springs'); INSERT INTO maps VALUES (0, 43.2975, -0.374362, 'Pau'); INSERT INTO maps VALUES (0, 52.5463, 19.7065, 'Plock'); INSERT INTO maps VALUES (0, 24.4609, 39.6202, 'Medina'); INSERT INTO maps VALUES (0, 48.8968, 2.25652, 'Courbevoie'); INSERT INTO maps VALUES (0, 48.8567, 2.35099, 'Paris'); |
Le fichier map.php, source de données pour Flex
Le fichier map.php qui génère le fichier xml des lieux et de leurs coordonnées géographiques qui constituera la source de données pour notre application Flex. NB: l’indication du port n’est pas indispensable, cela fonctionne aussi avec mysql_connect("localhost", "root", "root");
mysql_connect("localhost:3306", "root", "root"); mysql_select_db("flex_mapgoogle"); $result = mysql_query("select * from maps"); echo (''); /* la boucle des localisations */ while($row = mysql_fetch_assoc($result)) { echo (''); echo (''. $row["lat"].''); echo (''. $row["lon"].''); echo (''. $row["name"].''); echo (''); } echo (''); |
NB : Attention les fichiers square_hecube.png et map.php doivent être attachés à votre projet sous Flex.
CONCLUSION : Nous avons tout l’environnement susceptible de faire fonctionner notre application Flex et surtout de l’interfacer à la BDD flex_mapgoogle
L’application Flex
Pour comprendre de manire plus détaillée comment adosser un projet Flex à une serveur local sous MAMP, reportez-vous à cet article de ce blog :
Une fois le map_flex_1_16.swc inséré dans le projet Flex, on accéde à tous les class de l’application Google Maps
Sans la clé API dument insérée dans le map_google.mxml
Avec la clé API dument insérée dans le map_google.mxml
Le code source du fichier map_google.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:maps="com.google.maps.*"> <mx:Script> <![CDATA[ import com.google.maps.overlays.MarkerOptions; import com.google.maps.overlays.Marker; import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; import com.google.maps.controls.MapTypeControl; import com.google.maps.controls.ZoomControl; import com.google.maps.MapType; import com.google.maps.LatLng; import com.google.maps.MapEvent; /* On choisit le carré de hecube comme icône à placer sur les points de la carte */ [Embed(source="square_hecube.png")] private var ak:Class; private function onReady(e:MapEvent):void { /* On choisit Paris comme centre de notre carte */ /* -- Paris Latitude 48.8566667 Longitude 2.3509871 */ map.setCenter(new LatLng(48.8566667, 2.3509871), 10, MapType.PHYSICAL_MAP_TYPE); map.addControl(new ZoomControl()); map.addControl(new MapTypeControl()); service.send(); } private function onResult(e:ResultEvent):void { var list:ArrayCollection = e.result.map.loc; for(var i:int=0; i<list.length; i++) { var bm:Bitmap = new ak() as Bitmap; var m:Marker = new Marker(new LatLng(list[i].lat, list[i].lon), new MarkerOptions({tooltip:list[i].name, icon:bm, iconOffset:new Point(-59, -31)})); map.addOverlay(m); } } ]]> </mx:Script> <!-- l'API Key vient ci-dessous --> <mx:HTTPService id="service" url="map.php" result="onResult(event)"/> <maps:Map width="100%" height="100%" id="map" mapevent_mapready="onReady(event)" key="ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc_PC6mtqjHFWwOLDbePFpwWjAg"/> </mx:Application> |
L’icône pour matérialiser un point sur une carte Google
Faute d’imagination, on choisit le carré symbole de Hecube :):)
L’exportation de notre projet Flex map_google.mxml avec sa vue par défaut et la clé API
Grosso modo, l’essentiel de cette vue est déterminée par la ligne suivante map.setCenter(new LatLng(48.8566667, 2.3509871), 10, MapType.PHYSICAL_MAP_TYPE);
A l’aide de la fonction de zoom arrière, on découvre les autres lieux
Les deux premiers insertions INSERT INTO maps VALUES (0, -32.8902, -68.844, 'Mendoza');, INSERT INTO maps VALUES (0, -23.7004, 133.881, 'Alice Springs'); snt respectivement en Argentine et en Australie.
Dans BuddyPress
On va montrer où se trouve pour le moment les principaux éléments pour interfacer cette application Flex ci-dessus et notre reseau sous BuddyPress.
Qui joue en base ? Le numéro 14
Le field_id numéro 14 correspond au champs base. Ce dernier est défini dans le profile de chaque utilisateur.
Le champs base dans a processus d’inscription de BuddyPress
Il n’y a aucune routine qui permette par défaut de s’assurer d’une part que ce champ soit rempli et d’autre part compléter de manière adéquate pour l’utilisation de Google Map sans parler même de l’obtention des valeurs longitude et latitude.
<div class="signup-field"> <label for="field_14" class="signup-label">* Localisation géographique:</label> <input type="text" value="Paris" id="field_14" name="field_14"/> <span class="signup-description"> </span> </div> |
Trouver la table contenant ce champs et la requête SQL adéquate
Voici la structure de la table qui renseigne le champs base ainsi que la requête qui permet de sélectionner les valeurs remplies par les inscrits à votre réseau.
CREATE TABLE IF NOT EXISTS wp_bp_xprofile_data ( id BIGINT(20) UNSIGNED NOT NULL AUTO_INCREMENT, field_id BIGINT(20) UNSIGNED NOT NULL, user_id BIGINT(20) UNSIGNED NOT NULL, VALUE longtext NOT NULL, last_updated datetime NOT NULL, PRIMARY KEY (id), KEY field_id (field_id), KEY user_id (user_id) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=0 ; |
La requête SQL qui permet de sortir les localisations des membres du réseau
Pour des raisons de commodité et éviter de publier l’intégralité des localisation des membres, nous avons réduit à 20, le résultat de la requête. Bien sur pour générer une liste intégrale, il ne reste qu’à retirer la partie LIMIT 0,20
SELECT VALUE FROM wp_bp_xprofile_data WHERE field_id='14' LIMIT 0,20; |
Le résultat de la requête ci-dessus donne les éléments saisis dans le champs base
On reconnait le caractère protéiformes des données saisies, il faut donc indiquer quelques recommandation aux futurs membres du réseau sur comment remplir ce champs base. C’est indispensable pour effectuer la jointure avec les coordonnées géographiques d’un lieu (latitude et longitude).
Quelques règles pratiques de saisie du lieu de localisation
- Bannir les doubles localisations
Bourgogne/Ile de France, Google Map va vous envoyer à “Pétaouchnock” - Bannir les localisations avec un début de code postale ou d’arrondissement
paris 20, Google Map va vous envoyer à “Pétaouchnock”. Le format normaliséSaint Egrève (38)convient par contre à Google - Google Map reconnait néanmoins certaines abréviations type BCN (pour Barcelone) ou BXL (pour Bruxelles) ou BLN (pour Berlin). Ce qui est d’un usage courant sur le courrier postal.
Une fois ces règles de saisie établies, vous pourrez alors étendre les champs de saisie du champs base avec deux champs supplémentaires lat pour Latitude et long pour Longitude afin que l’utilisateur saisisse lui-même sa localisation et les coordonnées géographiques qui lui sont attachées
Sans nous étendre sur le comment, l’idée est de modifier le processus d’inscription de sorte que lors de l’inscription à BP, l’enregistrement se fasse simultanément dans cette table wp_bp_xprofile_data et maps. la table pourrait être ajoutée à la BDD de votre réseau social sous BP, il n’est pas nécessaire de créer une BDD ad hoc. Il faut aussi éviter de « tordre » une table existante de BP en rajoutant les champs lat et long directement dans la table wp_bp_xprofile_data.
Pétaouchnock inconnu au bataillon
+-------------------------+ | VALUE | +-------------------------+ | new-york | | Paris | | Paris | | paris 20 | | Paris | | Saint Egrève (38) | | Montpellier | | Paris | | Bourgogne/Ile de France | | london | | Olympus | | casablanca | | rouen | | Gonesse (95) | | Madrid | | Paris | | BCN | | Toulouse | | Toulouse | | Kaboul | +-------------------------+ |
CONCLUSION : Là encore, voici les pièces disparates mais indispensables pour monter la cartographie dans Google API via Flex des membres de votre réseau social. On a défini rapidement les principes fonctionnels et les bonnes directions dans lesquelles chercher. Dans un futur article, on verra comment mettre en musique l’ensemble et le mettre de manière opérationnelle en ligne au sein de BuddyPress sous forme de plugin, qui sait ?
Pour aller plus loin
- Installing and Using Google Maps in Flex
http://scriptplayground.com/tutorials/as/Installing-and-Using-Google-Maps-in-Flex/ - Google Maps API for Flash – FlexBuilder Tutorial
http://code.google.com/intl/fr/apis/maps/documentation/flash/tutorial-flexbuilder.html - Google Maps API for Flash Developer Guide
http://code.google.com/intl/fr/apis/maps/documentation/flash/intro.html - Coding with MXML and ActionScript
http://www.adobe.com/devnet/flex/quickstart/coding_with_mxml_and_actionscript/ - Google Maps API for Flash Basics
http://code.google.com/intl/fr/apis/maps/documentation/flash/basics.html - Des exemples données par Big G (gmaps-samples-flash)
http://code.google.com/p/gmaps-samples-flash/source/browse/trunk/samplecode/ - Using PHP/MySQL with the Google Maps API for Flash
http://code.google.com/intl/fr/apis/maps/articles/phpsqlflex.html#outputxml
A cet égard, un autre titre de PI, "The Lady and the Monk", un des titres de Pico Iyer, qui semble faire clairement référence pour des raisons de succès éditorial au titre "The monk and the philosopher" de Matthieu Ricard (fils) et Jean-François Revel (père), vous savez sur l’air de la chanson "Father and son" !
