HTML5 et géolocalisation

Par Kadda SAHNINE

Publié le | novembre 24, 2009 |

Au diapason d’une société gagnée par le nomadisme, la géolocalisation est depuis quelques années déjà une tendance lourde des industries numériques. Impulsées par la généralisation des puces GPS embarquées par les téléphones cellulaires, les techniques de géolocalisation se sont diversifiées notamment grâce à l’exploitation des signaux de réseaux : identification de cellule GSM (Cell ID), WiFi, adresse IP ou puce RFID.
Le GPS n’est plus le moyen exclusif de géolocalisation. De la même manière, le téléphone mobile n’est plus la porte d’accès exclusive à l’Internet en situation de mobilité, en particulier depuis la montée en puissance des netbooks.

Cet article est une présentation de l’API de géolocalisation proposée par le W3C, dont l’ambition est de normaliser l’accès aux services de localisation géographique depuis les navigateurs de nouvelle génération.
Stricto sensu, cette API ne fait pas partie des travaux de spécification HTML5 mais on a tendance à l’y associer. Dans cette optique, HTML5 agit plutôt comme une marque et représente davantage la plateforme d’exécution que le langage de description.

Présentation des interfaces

L’API de géolocalisation définit une interface d’accès à des services de localisation géographique, totalement agnostique vis-à-vis de la source d’information sous-jacente (GPS, WiFi, Cell-ID, etc.).

Firefox 3.5+ est à ce jour le seul navigateur à l’implémenter. Curieusement, Chrome ne l’implémente pas encore, ce qui est étonnant au regard de l’implication de Google sur ce sujet. Toutefois, l’extension Google Gears implémente une API de géolocalisation spécifique mais compatible avec la version du W3C.

Firefox utilise Google Location Services en transmettant l’adresse IP de l’utilisateur et des informations sur les points d’accès WiFi environnants, via une connexion chiffrée.

Interfaces de services

L’API étend l’objet javascript navigator et introduit l’interface Geolocation exposant les services de géolocalisation :

interface Geolocation {
  void getCurrentPosition(in PositionCallback successCallback,
    in optional PositionErrorCallback errorCallback,
    in optional PositionOptions options);
  long watchPosition(in PositionCallback successCallback,
    in optional PositionErrorCallback errorCallback,
    in optional PositionOptions options);
  void clearWatch(in long watchId);
};

• Le service getCurrentPosition() retourne la position courante de l’internaute de manière asynchrone afin de ne pas figer le navigateur. En outre, elle nécessite la permission explicite de l’utilisateur. En cas de succès, la fonction successCallback est invoquée. Il est possible de modifier le timeout par défaut en passant des options idoines.
• Le service watchPosition() permet de suivre la position de l’internaute lorsqu’il se déplace. La fonction successCallback est invoquée chaque fois que la nouvelle position diffère de la précédente.
• Enfin, le service clearWatch() permet d’interrompre la fonction de suivi géographique watchPosition().

Modélisation des coordonnées

Afin d’exploiter les données géographiques, l’API introduit les interfaces Position et Coordinates portant entre autres les latitudes et longitudes relevées.

interface Coordinates {
  readonly attribute double latitude;
  readonly attribute double longitude;
  readonly attribute double? altitude;
  readonly attribute double accuracy;
  readonly attribute double? altitudeAccuracy;
  readonly attribute double? heading;
  readonly attribute double? speed;
};

L’API par la pratique

Pour illustrer cet article, vous trouverez ci-après le code d’une fonction Javascript implémentée par notre démo, et permettant de localiser un internaute sur un fond de carte Google Maps.
Le code est d’une grande simplicité et n’appelle aucun commentaire particulier.
Les éléments spécifiques à l’API de géolocalisation apparaissent en gras. Le reste du code utilise l’API Google Maps v3 :

function localiser() {
  navigator.geolocation.getCurrentPosition( function(position) {
    var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById(’map_canvas’), myOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:’Ma position’
    });
  }, function (msg) {
      alert( ‘Localisation impossible’ );
    }
  );
}

Si vous disposez de Firefox 3.5+, ou d’un navigateur équipé de Google Gears, vous pouvez évaluer notre démo et consulter le code source dans son intégralité.

Comments