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

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Thank You for Signing Up for a Google Maps API Key!

Your key is:

ABQIAAAAbr0JY20cqFgvd3EtzjX8xRTp0ByTiBsAuE4XVoEALBVYr6OMDRQpc
_PC6mtqjHFWwOLDbePFpwWjAg

This 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.

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

		<!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&eacute;es g&eacute;ographiques (latitude et longitude) d&#x27;un lieu</title>
			<!-- La Google Maps API Key vient dans la balise script -->
			<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;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&#x27;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&eacute; par d&eacute;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, &#x27;moveend&#x27;, 
						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&eacute;es g&eacute;ographiques (latitude et longitude) d&#x27;un lieu, il vous suffit de taper le nom du lieu (ville, village...etc.)</p>
						<p><i>Il peut exister quelques "rat&eacute;s", en effet certains lieux peuvent ne pas &ecirc;tre localis&eacute;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.

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API 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 :

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

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
Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Sans la clé API dument insérée dans le map_google.mxml
Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

Avec la clé API dument insérée dans le map_google.mxml
Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

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 :):)

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

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);

Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

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.
Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

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

  1. Bannir les doubles localisations Bourgogne/Ile de France, Google Map va vous envoyer à « Pétaouchnock »
  2. 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
  3. 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
Google, Flex, Buddyress et WordPress - Interfacer BuddyPress et Google Map API sous Flex

 
		+-------------------------+
		| 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

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" !