[HTML5] Utiliser l’API de Géolocalisation : Part I

Voici une série d’articles techniques sur l’API de géolocalisation HTML5. Nous aborderons à travers plusieurs parties, chaque points importants de cette API , actuellement de plus en plus utlisée, quelques explication techniques du quid, de la pratique basique, en passant par la complexité de gestions des anciens navigateurs, des exemples cas de productions types  (marketing, e-commerce etc…).   

1. Introduction à l’API

2. Comparaison entre navigateurs

3. Dans la pratique
4. Support des navigateurs non HTML5 Compliant (Progressive enhancement)
5. Exemples d’utilisations concrets, intégration à l’aide des API existantes. 

Part I : Présentation de l’API Géolocalisation HTML5

Geolocalisation, géolocaliser ?

Tout d’abord, la géolocalisation, c’est quoi ? Globalement c’est le fait de pouvoir être localiser, selon un référentiel, ici notre planète, n’importe où nous sommes, lors de nos déplacements etc. Exemple typique : un GPS. Selon la position courante, le GPS nous situe sur une carte, puis nous dirige vers une direction, selon une destination.

Actuellement la géolocalisation est pratiquement omniprésente, principalement grâce à notre téléphone, GPS,  ou connexion internet…

HTML5 et la géolocalisation

Grâce à HTML5, L’api de géolocalisation de HTML5, nous fournit, plusieurs méthodes ( pour rappel : nous sommes coté client, en JavaScript ), permettant de localiser, précisément et simplement , l’utilisateur courant, bien sûr sous son consentement. Le degré de précisions des coordonnées varient selon plusieurs facteurs que nous verrons au long de ce post. Concernant votre propriété privé, lors d’une requête de position, l’utilisateur est automatiquement averti de cette requête,  et choisi d’accepter ou non de partager sa position.

Exemple sur Internet Explorer 9 :

Ainsi, nous pouvons récupérer, simplement , la latitude et longitude de l’utilisateur, de manière à l’exploiter sous différentes formes : GeoTagging, localisation de visites, réalité augmentée etc.,  présentation à l’aide d’API cartographiques comme Bings Maps. Le point important de cette API est qu’elle est totalement transparente de la device qui l’utilise, que vous naviguiez sur devices mobiles ou Desktop.

Note : L’api de géolocalisation n’est actuellement pas intégrée dans les spécifications officielles de HTML5. Celle-ci a uniquement été développée par le W3C, non par le WHATWG. Vous pourrez trouver les spécifications par le W3C ici.

Comment sommes nous géolocalisés ?

La façon dont nous sommes géoloclisés dépend fortement de la source matérielle avec laquelle nous naviguons. Plusieurs sources sont utilisés pour obtenir les coordonnées de l’utilisateur, chaque source à sa propre spécificité, et implique également son propre niveau d’ exactitude :

• IP Geolocation, (Exemple)
• Wi-Fi et Bluetooth avec adresses MAC
• Puces GSM/CDMA
• Global Positioning System (GPS), Assisted Global Positioning System (A-GPS)

Pour un téléphone, une trilatération est utilisée, basée sur les angles d’un point mobile : vous, vers plusieurs tours émettrices proches (cf schéma ci-contre : A notre position, Px les émetteurs).

Pour un PC de bureau, nous parlons de triangulation par Wifi, ou par géolocalisation par IP, sachant que ce dernier détient une précision se tenant au niveau des villes (basée sur les positions des répartiteurs Telecom, qui peuvent couvrir plusieurs villes).

• La plupart des devices mobiles équipées de puces GPS, disposent de 2 niveaux de géolocalisation : 
  • -          Premier niveau  très rapide utilisant la trilatération ( sur Windows Phone 7, la pile de localisation) , sans puce GPS, idéal pour une simple prise de position, sans besoin de très hautxe précision.
• -          Deuxième niveau  plus lourd, basé sur le système GPS de la device (si présent),  permettant de géolocaliser avec une grande précision ( quelques mètres ), idéal pour générer par exemple un tracking de position.

L’inconvénient de l’utilisation de la géolocalisation par GPS , est la consommation de batterie, et le temps d’initialisation. Cette deuxième méthode doit, dans un premier temps, initialisée le système GPS, pour ensuite le requêter. Sur les devices mobiles , l’utilisation du système GPS est  très consommatrice en énergie, surtout en Tracking mode ou celui-ci est interrogé à intervalles réguliers. Cependant, ce procédé permet une exactitude exclusive des informations.

La notion de précision est très importante dans l’utilisation de l’ API de Géolocalisation HTML5, puisqu’il vous sera possible de contrôler le degré d’exactitude de la requête de localisation selon un bas / haut niveau de précision.

Des API de cartographie interactives comme Bings Maps, ou Google maps sur devices mobiles, utilisent ses 2 procédés :

1. Première localisation par IP / Wifi à faible précision ( cercle de grande circonférence ) .
2. Seconde localisation ( si système GPS autorisé ) , affinement de la localisation ( cercle de petite circonférence).    

La circonférence du cercle indique le degré d’ erreur potentiel de l’estimation de votre position. Celle-ci variant en fonction des procédés utilisés techniquement pour effectuer la géolocalisation.

Notes : Le référentiel géographique de coordonnées utilisé par cette API est celui généralement utilisé pour tous systèmes de géolocalisation (WGS84 World Geodetic System). Ce qui implique que les coordonnées renvoyées par l’API peuvent être communément exploitées.

Notes bis : Si la géolocalisation vous intéresse, je vous invite à lire le blog de mon collègue Nicolas Boonaert, MVP Bing maps.

Les navigateurs et la géolocalisation HTML5

Actuellement, la quasi-totalité des versions up-to-date des browsers actuels implémentent l’API de géolocalisation HTML5.  Pour les anciennes versions de browsers, des polyfills peuvent être utiliser afin de reproduire au mieux l’expérience utilisateur de l’api. Nous verrons cela partie 3 de ce post.

• Du coté Desktop :

Navigateur	Version	Support
Internet Explorer	9.0+
Chrome	4.0 (Gears API)
Chrome	5.0+
Firefox	3.5+
Safari	5.0+
Opera	10.60+

• Du coté mobile :

Navigateur	Version	Support
Windows Phone 7	Mango
Android	2.0+
Opera Mobile	10.1+
Symbiam Mobile	S60 3+
Blackberry	6.0
Maemo	5.0