Géolocalisation. Remy Sharp

Transcription

1 Chapitre 9 Géolocalisation Remy Sharp L API de géolocalisation fait partie de ces API qui n ont rien à voir avec la spécification HTML5 ; elle a d ailleurs été créée par le W3C et non par le WHATWG. En fait, elle n a même jamais fait partie de la spécification Web Applications originale, mais elle est si intéressante que nous l avons incluse dans ce livre. Actuellement, c est une API essentielle pour créer des applications proposant une interaction avec les réseaux sociaux. Cette API est très simple à utiliser, et vous pouvez facilement l intégrer à vos applications pour éviter aux visiteurs de devoir eux-mêmes pointer ou défiler sur une carte.

2 190 Introduction à HTML5 Firefox 3.5+ est actuellement le seul navigateur de bureau qui implémente cette API, mais elle est également présente dans les versions de développement de Chrome, ce qui signifie qu elle sera bientôt intégrée à sa version stable. Bien qu elle ne soit pas disponible sur tous les navigateurs de bureau, beaucoup de smartphones et de navigateurs pour mobile l intègrent déjà, notamment via l implémentation de WebKit sur terminaux mobiles (alors que la version de WebKit pour les ordinateurs de bureau ne la propose pas encore c est probablement lié au fait que de nombreux smartphones sont également des terminaux GPS). Fennec, le navigateur mobile de Mozilla, supporte aussi la géolocalisation. En outre, PhoneGap, le framework de développement des applications mobiles Open Web, fournit également cette API. Punaiser vos visiteurs L API de géolocalisation nous permet de trouver la position exacte d un visiteur. Il existe déjà de nombreuses applications qui l utilisent, que ce soit pour la cartographie, comme Google Maps à la Figure 9.1, ou pour certains réseaux sociaux comme Gowalla et Google Buzz. Figure 9.1 Google Maps détecte le support de la géolocalisation et ajoute une fonctionnalité "Où suis-je?".

3 Chapitre 9 : Géolocalisation 191 Cette API offre deux méthodes pour obtenir les informations sur la position de vos utilisateurs : 1. getcurrentposition est une méthode permettant d obtenir la position courante de l utilisateur. 2. watchposition surveille la position de l utilisateur et l interroge à intervalles réguliers pour savoir si elle a changé. watchposition reprend donc la fonctionnalité de getcurrentposition mais prévient également votre code lorsque la position de l utilisateur a changé. getcurrentposition et watchposition travaillent de façon asynchrone pour établir la position de l utilisateur. Il n y a qu une seule exception à cette règle : si l utilisateur visite votre site pour la première fois, le navigateur affichera une boîte de dialogue demandant la permission de partager cette position. Si l utilisateur refuse et que vous avez demandé à l API de transmettre les erreurs à une fonction précise, celle-ci sera appelée avec les détails de l erreur. La spécification indique : "Les agents utilisateurs ne doivent pas envoyer d informations de géolocalisation aux sites web sans l autorisation expresse de l utilisateur." C est donc aux navigateurs d informer les utilisateurs qu ils essaient de récupérer leur position courante, et chacun d eux le gère de façon différente. Firefox par exemple affiche une alerte non modale et non bloquante demandant à l utilisateur s il souhaite partager sa position (voir Figure 9.2) : votre application continue donc de s exécuter. Figure 9.2 Firefox demande à l utilisateur s il souhaite partager sa localisation. D autres, comme Safari Mobile, ouvrent une boîte de dialogue modale et empêchent toute exécution du code tant que l utilisateur n a pas répondu (voir Figure 9.3).

4 192 Introduction à HTML5 Figure 9.3 Safari Mobile avec un dialogue modal qui empêche l application de continuer. Méthodes de l API L API de géolocalisation existe dans l objet navigator et ne contient que trois méthodes : getcurrentposition watchposition clearwatch Les méthodes watchposition et clearwatch sont duales ; elles fonctionnent comme setinterval et settimeout. watchposition renvoie un identifiant unique qui est passé à clearwatch pour supprimer la surveillance concernée. Comme on l a déjà mentionné, getcurrentposition et watchposition sont un peu des copies l une de l autre et prennent les mêmes paramètres : un gestionnaire de succès ; un gestionnaire d erreur ; des options de géolocalisation. Une utilisation simple de cette API consiste à passer un gestionnaire de succès à la méthode getcurrentposition :

5 Chapitre 9 : Géolocalisation 193 navigator.geolocation.getcurrentposition(function (position) { alert("je vous vois!"); // Faire quelque chose des informations de position }); Le gestionnaire de succès Le gestionnaire de succès est appelé si l utilisateur autorise le navigateur à partager sa position et s il n y a pas d autre erreur. Ce gestionnaire est le premier paramètre de getcurrentposition et watchposition. Ce gestionnaire reçoit un objet Position contenant deux propriétés : un objet coords renfermant les coordonnées, et une étiquette temporelle. Les informations utiles se trouvent dans l objet coordonnées et se décomposent en deux catégories ; la première apparaît dans tous les navigateurs qui gèrent la géolocalisation Chrome 5, Firefox 3.5+, Safari Mobile et Safari 5, et Android 2.0 : readonly attribute double latitude readonly attribute double longitude readonly attribute double accuracy accuracy est la précision de la latitude et de la longitude en mètres. Vous pourriez vous en servir comme rayon d un cercle montrant la précision de la position de l utilisateur sur une carte, par exemple. La seconde catégorie d informations de l objet coordonnées est reconnue, mais ces informations ne sont actuellement associées à aucune valeur. Elles vaudront donc null, 0 ou NaN dans tous les navigateurs qui gèrent la localisation : readonly attribute double altitude readonly attribute double altitudeaccuracy readonly attribute double heading readonly attribute double speed Grâce aux coordonnées, vous pourriez aisément retrouver la position courante d un utilisateur sur une cartographie comme Google Maps : if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function (position) { var coords = position.coords; showmap(coords.latitude, coords.longitude, coords.accuracy); }); }