Ajouter

Tutorial – Geocoding avec l'API Google MAP dans Flash Builder 4 / Flex Gumbo – Part 1

Dans ce Tutorial Flash Builder 4 / Flex Gumbo, nous allons voir comment créer un point sur la Map Google à partir d'une saisie provenant d'un champs (textfield) de recherche via la technique du Geocoding.

Info : le Geocoding est le procédé qui converti des adresses (par exemple : 16 avenue Victor Hugo, Paris) en des coordonnées géographiques (exemple : latitude 37.345345 et longitude 20.3003204), que vous pouvez donc utiliser pour placer des points sur une Map Google.

L'API Google Maps pour Flash / Flex contient un « client geocoder » qui permet de géocoder dynamiquement des données à partir d'une saisie utilisateur.

Etapes du Tutorial :

1. L'objet Geocoding
2. Les évenements (events) et réponses (responses) du Geocoding
3. Exemple d'application dans Flash Builder 4 Beta 2

1. L'objet Geocoding

Le Géocoding dans l'API Google Maps pour Flash / Flex a besoin d'une requète (request) asynchrone (asynchronous) vers les serveurs Google pour fonctionner. C'est pourquoi vous ne pouvez pas géocoder une adresse via un appel de fonction simple. Le Géocoding requiert les étapes suivantes pour être fonctionnel :

1. Création d'un objet ClientGeocoder
2. Définition d'un event listener (écouteur) dans Flex sur cet objet avec comme type l'évenement GeocodingEvent
3. Initialisation d'une requète de Géocoding via la méthode ClientGeocoder.geocode()

La requète va ensuite être envoyée au service de Geocoding de Google, ce qui va générer une réponse via un event ClientGeocoder et le retour pourra être utilisé dans Flex.

2. Les évenements (events) et réponses (responses) du Geocoding

L'API Google Map pour Flash / Flex met à notre disposition un event GeocodingEvent qui permet de récupérer les données (datas) associées à une requête. Cet objet contient deux events :

• GEOCODING_SUCCESS
• GEOCODING_FAILURE

Vous pouvez définir ces event comme ci-dessous :

var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, handleGeocodingSuccess);
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, handleGeocodingFailure);

Dans chaque cas, l'évenement retourne des informations relativent à la requète du Geocoding dans les propriétés du GeocodingEvent lui même :

• request : stocke la requête originale dans une chaîne de type String.
• requestType : stocke le type de requête de Geocoding ( »geocoding » est le seul pour le moment).
• response.name : stocke la requête originale dans une chaîne de type String.
• response.placemarks.address : stocke l'adresse trouvée.
• response.placemarks.addressDetails : stocke les détails de l'adresse conformément au xAL, ou eXtensible Address Language,
  un standard international pour le formatage des adresses.
• response.placemarks.point : stocke la LatLng (latitude et longitude) de l'adresse géocodée.
• status : contient le status de la requête géocodée et ajoute généralement des informations additionnelles quand la requête a échouée par exemple.

Une fois que vous avez paramétré les porteurs (handlers) pour les évènements GeocodingEvent, vous pourrez initialiser la requête avec la méthode ClientGeocoder.geocode(), qui va prendre la chaîne String de l'adresse saisie dans votre textfield en argument.

3. Exemple d'application dans Flash Builder 4 Beta 2

Pour ce tutorial, j'ai repris la source finale de notre première application Google Map pour Flash / Flex que vous pourrez ici :
Tutorial – API Google Map dans Flash Builder 4

Nous allons tout d'abord ajouter un composant Spark controlBarContent qui va contenir un Spark TextInput pour la saisie de notre adresse et un composant Spark Button pour la validation de notre recherche. Notez que nous avons ajouté deux events à ces composants : l'event enter pour le TextInput et l'event click pour le composant Button, qui vont tous deux faire appel par la suite à notre fonction de Géocoding doGeocode(). Le code est le suivant :

 MXML | 
 Copier le code
 
<s:controlBarContent>
 <s:Label text="Test Geocoding Flash Builder Tutorial - Adresse : "/>
 <s:TextInput id="address"
  text="La Rochelle"
  width="250"
  enter="doGeocode(event);"/>
 <s:Button id="submitButton" label="Rechercher"
   click="doGeocode(event);"
   />
 </s:controlBarContent>

Nous ajouterons aussi  un composant Spark controlBarLayout afin d'agencer le rendu de notre Spark controlBarContent, comme ci-dessous :

 MXML | 
 Copier le code
 
<s:controlBarLayout>
 <s:HorizontalLayout paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5" gap="5" verticalAlign="middle"/>
 </s:controlBarLayout>

Ajoutez ensuite le code de notre fonction doGeocode() suivant dans la partie fx:Script de votre application :

 ActionScript 3 | 
 Copier le code
 
private function doGeocode(event:Event):void {
	// Geocoding example
 
	if (address.text==""){
 
		Alert.show("Veuillez saisir une adresse", "Attention");
 
	}else{
 
		var geocoder:ClientGeocoder = new ClientGeocoder();
 
		geocoder.addEventListener(
			GeocodingEvent.GEOCODING_SUCCESS,
			function(event:GeocodingEvent):void {
				var placemarks:Array = event.response.placemarks;
				if (placemarks.length > 0) {
					map.setCenter(placemarks[0].point);
					var marker:Marker = new Marker(placemarks[0].point);
 
					marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
						marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
					});
					map.addOverlay(marker);
				}
			});
		geocoder.addEventListener(
			GeocodingEvent.GEOCODING_FAILURE,
			function(event:GeocodingEvent):void {
				Alert.show("Geocoding failed", "Alerte !");
				trace(event);
				trace(event.status);
			});
		geocoder.geocode(address.text);
 
	}
 
}

Le détail est le suivant :

Nous créons dans un premier temps notre objet ClientGeocoder auquel nous ajoutons les deux évenements nous permettant de contrôler le retour : GeocodingEvent.GEOCODING_SUCCESS et GeocodingEvent.GEOCODING_FAILURE.

Dans le cas d'une réponse positive (Success), nous effectuons les étapes suivantes :

• Création et définition des propriétés du point sur la map en l'ajoutant à un tableau (array) de points.
• Définition du nouveau centre de la map en prennant les coordonnées du dernier lieu recherché.
• Ajout d'une petite tooltip avec comme déclencheur l'event : MapMouseEvent.CLICK

Dans le cas d'une réponse non aboutie (Failure) :

• Affichage d'une alerte avec le status de l'event

Rendu final de l'application Flex (nécessite Flash Player 10 ou version supérieure) :

Télécharger les sources complètes du Tutorial Flash Builder 4

Autre(s) source(s) proche(s) de ce sujet :

1. Tutorial – Chargement de Markers personnalisés via PHP / MySQL dans Flash Builder 4 / Flex Gumbo
2. Tutorial – API Google Map dans Flash Builder 4