Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR pour Android – Visualiser la géolocalisation GPS sur Google Maps avec Air

Maintenant que vous savez créer une application Air pour Android qui sait accéder à Internet et récupérer les données GPS du téléphone, il est temps de faire une application qui va afficher la position de l'utilisateur sur une carte Google Maps.

Si vous créez une application Android Native en Java, vous avez directement à votre disposition, un composant carte basé sur Google Maps. Heureusement, nous sommes basé sur l'API Flash Player et Flex. Nous pouvons donc utiliser toutes les librairies AS3 / Flex que l'on peut trouver sur le net. Ce n'est par exemple pas possible avec OpenPlug qui se base sur sa propre implémentation de Flex (en gros). Bref, on va commencer par récupérer la librairie Google Maps et une clé développeur afin de développer.

Les clés API Google Maps

Pour pouvoir utiliser l’API, vous devez récupérer une clé API. Celle-ci va permettre à Google de vous identifier lorsque vous allez utiliser les services Google. Chaque clé API est liée à un nom de domaine. Quand vous travaillez dans Flash Builder, vous allez exécuter votre application Flex en local, pas besoin de clé dans ce cas. Dès que vous serez sur un serveur distant, il vous faudra générer une clé API Google Maps, sans quoi aucune carte ne s’affichera.

Google Maps est un service gratuit pour toute application à accès public, gratuit, et à but non commercial. Si vous comptez l’utiliser pour un intranet ou dans le cadre d’une application commerciale, vous devrez payer la redevance Google Maps (environ 8000 euros / an) :
http://code.google.com/intl/fr/apis/maps/terms.html

Pour générer une clé Google Maps API, veuillez vous rendre à l’adresse (comme adresse, donnez http://localhost, voir explication plus loin):

http://code.google.com/intl/fr/apis/maps/signup.html

Préparation du projet Flex

Pour pouvoir utiliser l’API Google Maps, il suffit de télécharger la librairie Google Maps au format SWC :

http://maps.googleapis.com/maps/flash/release/sdk.zip

Dans cette archive, vous allez trouver :

• La documentation, au format ASDoc (/docs/index.html)
• Le SDK Google Maps, au format SWC (/lib/ map_flex_1_18.swc)

Dans Flash Builder, prenez le projet AirGeoloc que vous pouvez télécharger dans le tutorial précédent. De base, Flash Builder va créer un dossier « libs » dans votre projet. Copiez la librairie Google Maps (map_flex_1_18.swc) et collez-le dans le dossier libs de votre projet.

Si vous voulez utiliser votre propre application, n'oubliez pas de modifier les permissions du descripteur XML comme expliqué dans le tutorial précédent.

Les projets créés avec Flash Builder sont configurés automatiquement pour avoir le dossier « libs » dans leur Library Path. Vous n’avez ainsi pas à modifier les propriétés de votre projet pour qu’il reconnaisse les classes de la librairie.

Création de la carte Google Maps

Pour commencer, on va ajouter le composant principal de Google Maps, le composant « Map ».
Placez votre curseur à l’intérieur du tag <s:Application>, et commencez à taper "<maps:M". Si vous avez bien ajouté la librairie Google Maps, vous devriez avoir l’auto-complétion :

Dans la liste, sélectionnez le premier élément : <maps:Map – com.google.maps. Une fois sélectionné, vous verrez que Flash Builder va automatiquement ajouter le namespace correspondant à la librairie Google Maps : xmlns:maps="com.google.maps.*"

Si vous n’avez pas d’auto-complétion lors de la frappe sur les classes Google Maps, cela signifie que vous n’avez pas intégré le fichier SWC dans votre projet. Vérifiez le Library Path de votre projet (Clic droit sur le projet > Properties > Library Path).

Ajoutez quelques propriétés (hauteur, largeur, clé API Google Maps) :

<maps:Map id="map" width="100%" height="100%" key="Votre clé Google Maps API ici" url="http://localhost" />

Notez que le paramètre "url" est spécifique à une utilisation dans Air qui n'est pas contenue dans un browser. L'API Google Maps ne peut donc pas détecter si votre clé correspond à l'URL que vous avez entré à la génération de la clé. Donnez simplement http://localhost comme url.

Lancez votre application, vous verrez apparaitre une carte du monde :

Récupération des informations de géolocalisation

On a vu comment récupérer les informations de géolocalisation dans le tutorial précédent. Pour être sur de ne pas se centrer sur la carte avant que la carte ne soit initialisée, on va cette fois faire notre code non pas sur le APPLICATION_COMPLETE de l'application mais sur l'évènement "mapevent_mapready" envoyé par l'objet Map.

Voici donc le code qui va permette de récupérer ces informations puis de se centrer sur la position donnée:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                width="100%" height="100%" xmlns:maps="com.google.maps.*">
  <mx:Script>
    <![CDATA[
      import com.google.maps.LatLng;
      import com.google.maps.MapEvent;
      import com.google.maps.controls.MapTypeControl;
      import com.google.maps.controls.PositionControl;
      import com.google.maps.controls.ZoomControl;

      import flash.sensors.Geolocation;

      import mx.controls.Alert;
      import mx.events.FlexEvent;

      private var _geolocation:Geolocation = null;
      protected function map_mapevent_mapreadyHandler(event:MapEvent):void{
        map.addControl(new ZoomControl);
        map.addControl(new PositionControl);

        if (Geolocation.isSupported){
          _geolocation = new Geolocation;
          // on va vérifier toutes les secondes
          _geolocation.setRequestedUpdateInterval(1000);
          _geolocation.addEventListener(GeolocationEvent.UPDATE, geolocationUpdateHandler);
        } else {
          Alert.show("Votre appareil ne supporte pas la Géolocalisation");
        }
      }
      private function geolocationUpdateHandler(event:GeolocationEvent):void{
        // création d'un objet Google Maps LatLng
        var latLng:LatLng = new LatLng(event.latitude, event.longitude);
        // 26 = zoom maximal
        map.setCenter(latLng, 14);
        Alert.show("Nouvelle position utilisateur: " + latLng.toString());
      }

    ]]>
  </mx:Script>
  <maps:Map id="map" key="ABQIAAAA5oy7BOLSV2Fc9rlLk28UhxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSxQ6IB9tYvqvxz85ErZa6QsZxWVw" width="100%" height="100%"
            url="http://localhost"
            mapevent_mapready="map_mapevent_mapreadyHandler(event)"/>
</mx:Application>