La géolocalisation HTML5

HTML5_Logo_256

Les services de géolocalisation sont devenus indispensables dans la vie de tous les jours pour les utilisateurs d'application web ou mobiles. Dans cet article, je vous propose donc de découvrir la solution proposée par la norme HTML5 pour faciliter l'implémentation de ces fonctionnalités de géolocalisation ainsi que la méthode à utiliser pour mettre en place cette API.

Solution proposée par la norme HTML5

Pour faciliter l’implémentation des fonctionnalités de géolocalisation dans les sites web et sur les applications mobiles HTML5/JavaScript, une API de géolocalisation a été définie pour tous les navigateurs compatibles HTML5 :

var geolocator = window.navigator.geolocation;

Méthodes

Cette API propose de récupérer la position de 2 façons différentes :

  • La récupération en une seule fois de ces coordonnées avec la méthode getCurrentPosition
  • La récupération périodique de la position avec les méthodes watchPosition et clearWatch
// [param] signifie que le paramètre est optionnel
// Appel unique pour récupérer la position
window.navigator.geolocation.getCurrentPosition(positionCallback, [positionErrorCallback], [positionOptions]);

// Appel périodique pour récupérer  la position
var wacher = window.navigator.geolocation.watchPosition(positionCallback, [positionErrorCallback], [positionOptions]);

// stop l’appel à watchPosition
window.navigator.geolocation.clearwatch(wacher) ;

positionCallback et positionErrorCallback sont les fonctions à appeler en cas de succès ou d’erreur de la récupération de la position

Les différentes valeurs pour positionOptions sont :

  • enableHighAccuracy : Augmente la précision de la géolocalisation, mais demande plus de ressources.
  • timeout : Le temps de réponse maximum avant de considérer que la géolocalisation a échoué
  • maximumAge : Le temps en millisecondes pendant lequel la position est gardée en cache. Cette option peut être également utilisée pour choisir la période de récupération lorsque l’on utilise la méthode « watchPosition »

La position est renvoyée en tant que paramètre des fonctions positionCallback et positionErrorCallback, sous la forme d’un objet Javascript ayant cette forme :


{
  coords:  { 
       accuracy: 1255
       altitude: null
       altitudeAccuracy: null
       heading: null
       latitude: 45.7477113
       longitude: 4.8240999
       speed: null
  },
  timestamp: 1444649104597
}

Complément

En complément de cette position pouvant être utilisée sur une carte, il peut être intéressant de récupérer directement la région de l’utilisateur, par exemple dans un site de petites annonces et initialiser le formulaire de recherche avec la région de l'utilisateur.

Pour cela il existe un service Google faisant tout le travail :

https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&sensor=false

Plus d’informations peuvent être trouvées dans la documentation de ce service :
https://developers.google.com/maps/documentation/geocoding/intro

2 commentaires

  1. Bonjour Bastien et merci pour cet article intéressant.
    Il me semble qu’une coquille s’est glissée tout au long du document,
    à savoir l’utilisation du terme geolocalisation au lieu de geolocation.

    Exemple :

    var geolocator = window.navigator.geolocalisation;

    devrait plutôt être

    var geolocator = window.navigator.geolocation;

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.