Géolocalisation

jeudi 10 décembre 2009, par Guillaume Orsal

Introduction

Vous avez surement vu se multiplier les sites et applications de réalité augmentée utilisant vos coordonnées géographiques pour vous apporter de l’information pertinente. Intrigué comme toujours par une nouvelle technologie, j’ai souhaité comprendre son fonctionnement pour éventuellement développer de nouvelles applications web.

L’iPhone semble proposer cette fonctionnalité, mais Apple empechant le dev sur iPhone à moins d’avoir un mac, et encore, à condition de payer, j’ai cherché un autre moyen. Certains sites internet proposent déjà une localisation via le navigateur web. Cela présente l’énorme avantage de s’affranchir du support, la géolocalisation n’est plus limitée à un type de téléphone, et fonctionne même sur un ordinateur.

Mais trouver de l’info sur le sujet a été plus long que prévu. J’espère donc vous faire gagner un peu de temps en partageant ici, en une synthèse, ce que j’ai pu comprendre de la géolocalisation.

Objectif

Je vais vous présenter les deux technologies qui existent au moment de la rédaction de cet article. Tout d’abord les fonctions du standard W3C qui commence à être implémentées par la plupart des navigateurs. Puis, les fonctions de géolocalisation offertes par la suite Google Gears, qui permet de prendre le relai lorsque le standard n’est pas présent. Enfin nous verrons comment s’affranchir de la plateforme en unifiant les deux technos au travers d’un exemple.

Technologies existantes et techniques de localisation

Evidemment cela aurait été trop simple si il n’y avait qu’un seul standard. J’ai recensé deux technologies de géolocalisation.

Le W3C, un consortium en charge de l’élaboration de standards du web, a défini une API que les dernières versions des navigateurs commencent à implémenter.

De son côté, Google a développé son propre outil, en intégrant des fonctionnalités de géolocalisation à Google Gears. Il s’agit d’une suite logiciel qui fournit des fonctions supplémentaires pour permettre une navigation plus évoluée.

Mais dans les deux cas, le principe en charge de la géolocalisation est le même. Après autorisation de la part de l’utilisateur, le navigateur communique à un serveur de localisation l’ensemble des informations utiles, qu’il a à sa disposition, pour les traduire en coordonnées géographiques : adresse IP, réseau wifi à portée, BTS, information A-GPS, ... En retour, le serveur de localisation fourni les coordonnées géographiques qu’il a déduit, en croisant les informations avec différentes bases de connaissances.

Standard W3C

Google Gears

Multi-plateforme

<head> 

  // Inclusion de la librairie javascript Google Gears

  <script type="text/javascript" src="gears_init.js"></script> 



  // Inclusion de la librairie javascript pour l'API Google Maps avec la clé d'utilisation

  <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=MaCleGoogleMaps"></script>



  // Inclusion de la librairie javascript pour l'API AJAX pour Google Maps

  <script type="text/javascript" src="gmap.js"></script> 



  // Début de la partie pour la géolocalisation

  <script type="text/javascript">



    // Test de la compatibilité de navigateur avec l'api google maps

    if ( ! GBrowserIsCompatible() ) return false ;

 

    // Initialisation de la variable pour connaitre la méthode de localisation utilisée

    var methodo = "Pas encore localisé.";



    // Fonction fournissant un outil de localisation compatible avec la plateforme où est exécuté le script 

    function outilGeoloc()

    {

      // Test si le navigateur implémente le standard W3C

      if ( navigator.geolocation ) {

        // Si ok, on utilise le localiseur standard

        methodo = "Location API" ;

        return navigator.geolocation ;

      }

      // Sinon on test si Google Gears est accessible

      var geogears = google.gears.factory.create('beta.geolocation') ;

      if ( geogears ) {

        methodo = "Google Gears" ;

        return geogears ;

      }

      // Ajouter le cas par défaut ou rien ne fonctionne ?

    }



    // Fonction de recherche des coordonnées géographiques

    function trouvePosition()

    {

      // Récupérer un outil de géolocalisation disponible sur la plateforme client

      var localiseur = outilGeoloc();

      // Appel à la fonction de géolocalisation, heureusement standard elle...

      localiseur.getCurrentPosition(trouve, pasTrouve);

    }

 

    // Fonction a exécuter si la position a été trouvée

    function trouve(position)

    {

      var lat = position.coords.latitude;

      var long = position.coords.longitude;

      document.getElementById("map_lng").value = long;

      document.getElementById("map_lat").value = lat;

      document.getElementById("methodo").value = methodo;

      gmap_load('map', long, lat, 17);

      point = new GLatLng(48.838338, 2.280073);

      markerOptions = {clickable:true, draggable:false };

      marker = new GMarker(point, markerOptions);

      map.addOverlay(marker);

      marker.info_window_content ='<strong>Home</strong><p>Paris</p>'

      marker.bindInfoWindowHtml(marker.info_window_content, {maxWidth:200});

      GEvent.addListener(marker, "click", function() {

        map.panTo(point, 2);

      });

    }



    // Fonction a exécuter si la position n'a pas été trouvée

    function pasTrouve()

    {

      document.getElementById("map_lng").value = '';

      document.getElementById("map_lat").value = '';

      document.getElementById("methodo").value = 'Impossible de vous localiser.';

      gmap_load('map', 2.294351, 48.858844, 17);

    }



    // Fonction de détection du type de navigateur web utilisé par le client

    function detectBrowser() {

      var useragent = navigator.userAgent;

      var mapdiv = document.getElementById("map");



      // Si le client est un mobile, on adapte l'affichage à la taille du support

      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {

        mapdiv.style.width = '320px';

        mapdiv.style.height = '200px';

      } else {

        mapdiv.style.width = '600px';

        mapdiv.style.height = '400px';

      }

    }



    // Fonction d'initialisation de la géolocation, appelée une fois la page chargée

    function initialisation() {

      trouvePosition();

      detectBrowser();

    }

  </script>



  // Quelques meta tags pour contraindre / parametrer l'affichage sur support mobile

  <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport"> 

</head>

Exemple de mise en oeuvre

En attendant que je mette en ligne l’article, une petite démo ici :

La démo n’est plus disponible

Conclusion

Pour aller plus loin...

| Plan du site | Mentions légales | RSS 2.0 |