Géolocalisation de vos visiteurs en Javascript grâce à HTML 5 !

Voici une découverte intéressante qui vous permettra de géolocaliser vos visiteurs en Javascript sans bibliothèque supplémentaire, directement grâce aux nouvelles spécifications du W3C qui ont été intégrées à Firefox 3.5 et Fennec (version mobile de Firefox).

Cette fonctionnalité a notamment été intégrée à Google Maps. Pour la tester, rendez-vous sur Google Maps (http://maps.google.com/) et cliquez simplement sur le petit bouton à droite de la carte, entre les flèches de navigation et le bonhomme de Street View.

Comment ça marche ?

Le navigateur va demander la permission à l’utilisateur (via une barre affichée en dessous des onglets sous Firefox) de récupérer différentes informations concernant sa position actuelle (adresse IP, réseaux WiFi dans les environs, etc) et va ensuite les envoyer à un service de géolocalisation, dans le cas de Firefox, à Google Location Services.

Google Location Services renvoie alors une estimation de géolocalisation (par ex. la latitude et la longitude).

Suivant votre position actuelle cela peut-être très précis ou pas du tout.

Par exemple dans mon cas lorsque je test ça au travail, je suis localisé exactement au bon endroit (à quelque mètres près). Quand je suis chez moi, par contre, la différence est plutôt de quelques kilomètres. Un ami m’a même rapporté une différence de plusieurs centaines de kilomètres dans son cas !

Si vous souhaitez plus d’informations, n’hésitez pas à consulter la page de Mozilla consacrée à ce sujet : http://fr.www.mozilla.com/fr/firefox/geolocation/

Et tout ça dans HTML 5 ?

Pour les plus curieux (et anglophones) vous pouvez allez lire les spécifications du W3C concernant cette fonctionnalité à cette adresse : http://dev.w3.org/geo/api/spec-source.html.

Comment on fait ?

Rien de plus simple… Mozilla a même publié une page dans son Wiki pour en expliquer le fonctionnement : https://developer.mozilla.org/En/Using_geolocation

Prenons un exemple tout simple où nous allons simplement afficher la position (latitude, longitude et altitude) du visiteur.

Il faut tout d’abord commencer par vérifier si la géolocalisation est disponible :

if(navigator.geolocation)
{
      // La géolocalisation est possible !
}

Nous allons ensuite, si la géolocalisation est possible, créer un bouton sur la page web pour permettre au visiteur de lancer la localisation :

            // Création d'un bouton dans le DIV qui a pour ID "locateme" pour lancer la localisation
            var startGeolocationButton = document.createElement('input');
            startGeolocationButton = document.getElementById('locateme').appendChild(startGeolocationButton);
            startGeolocationButton.setAttribute('type', 'button');
            startGeolocationButton.setAttribute('value', 'Localise-moi !');

Nous allons maintenant définir ce qui se passera au moment où l’utilisateur va cliquer sur le bouton. Nous allons exécuter la fonction « navigator.geolocation.getCurrentPosition » et lui passer en paramètre la fonction de callback vers laquelle envoyer les informations sur la position actuelle du visiteur.

Information : Ce que j’ai fait ici n’est pas très propre, mais pour ne pas compliquer le code avec des vérifications de compatibilité je vais directement définir l’attribut « onclick » de notre bouton sans utiliser d’event listener.

           startGeolocationButton.setAttribute('onclick', 'navigator.geolocation.getCurrentPosition(locateMe);');

Créons maintenant notre fonction locateMe() qui va s’occuper d’afficher la position actuelle du visiteur.

Cette fonction a besoin d’un seul paramètre, ce sera un objet contenant les informations sur la position actuelle du visiteur :

      function locateMe(position)
      {
            // Affichage des informations de position
      }

Il ne nous reste plus qu’à afficher la position via les variables suivantes :

• position.coords.latitude : La latitude
• position.coords.longitude : La longitude
• position.coords.altitude : L’altitude

Ce qui peut donner par exemple :

           alert('Latitude : '+ position.coords.latitude+'\n'+
				 'Longitude : '+position.coords.longitude+'\n'+
				 'Altitude : '+position.coords.altitude);

N’oubliez pas d’ajouter un div avec pour ID « locateme » quelque part dans votre page web et de placer le code Javascript après celui-ci (exemple) !

<div id="locateme"></div>

Et la lumière fut !

ééèççèé

Code final

Voici donc le code final de cet exemple :

<div id="locateme"></div>
<script type="text/javascript">
     if(navigator.geolocation)
     {
           // La géolocalisation est possible !
           // Création d'un bouton dans le DIV qui a pour ID "locateme" pour lancer la localisation
           var startGeolocationButton = document.createElement('input');
           startGeolocationButton = document.getElementById('locateme').appendChild(startGeolocationButton);
           startGeolocationButton.setAttribute('type', 'button');
           startGeolocationButton.setAttribute('value', 'Localise-moi !');
           // On ajoute un attribut "onclick". Pas très propre comme ça, mais ça fonctionne dans la plupart des navigateurs.
           // Auc clic sur le bouton, on execute la fonction "navigator.geolocation.getCurrentPosition" et on lui passe en paramètre la fonction de callback vers laquelle envoyer les informations.
           startGeolocationButton.setAttribute('onclick', 'navigator.geolocation.getCurrentPosition(locateMe);');
     }
     // Affichage des informations de géolocalisation
     function locateMe(position)
     {
           alert('Latitude : '+ position.coords.latitude+'\n'+
				 'Longitude : '+position.coords.longitude+'\n'+
				 'Altitude : '+position.coords.altitude);
     }
</script>

Enjoy ! ;-)

Sources et liens utiles

• http://fr.www.mozilla.com/fr/firefox/geolocation/
• http://dev.w3.org/geo/api/spec-source.html