Après avoir accepté la géolocalisation, vous pourrez découvrir les éléments remarquables autour de vous dans la langue de votre choix.
Bien sûr, c’est beaucoup plus utile, et cela a plus de sens, sur un smartphone ou une tablette mobile qu’avec votre ordinateur fixe dans votre salon...

Il est à noter qu’en fonction de la langue choisie, vous aurez accès à plus ou moins d’informations.
Aussi est-il intéressant d’explorer ce que les autres pays ont pu noter en fonction du lieu où vous vous trouvez !

Autour de moi, on peut trouver en  :

Bonnes lectures et découvertes !

Mais comment cela marche ?

En fait, c’est très simple...
Il suffit d’obtenir les coordonnées (latitude et longitude) de l’appareil qui consulte cette page, puis de se rapprocher de Wikipédia et de ses articles géolocalisés.
Un petit tri en fonction de la langue choisie et de la distance entre votre position et les lieux décrits dans l’encyclopédie libre, permet d’afficher les 10 éléments les plus pertinents par rapport à votre position.
Et voilà !

Mais si vous avez envie de savoir comment cela peut bien fonctionner au niveau technique, alors continuez votre lecture.

L’une des belles et nombreuses nouveautés introduites par HTML5 est la géolocalisation utilisable via une API d’un navigateur.
Cela permet aux pages web d’interroger le navigateur sur la position géographique de l’utilisateur. Navigateur qui va lui-même interroger ensuite le hardware (GPS, données cellulaires des répéteurs et des antennes, correspondance adresse IP V4 avec des coordonnées, etc.) à travers le système d’exploitation.

Aujourd’hui cette API permet d’obtenir facilement :

  • la latitude et la longitude ainsi que la précision de la mesure
  • l’altitude avec sa précision
  • la vitesse de l’appareil par rapport à sa dernière position
  • l’angle formé entre le nord et le déplacement de l’appareil

Mais avant de chercher à utiliser la géolocalisation, il est bien entendu important de savoir si le navigateur de l’utilisateur la supporte.
Pour cela on teste la valeur de navigator.geolocation qui renvoie un simple booléen valant vrai ou faux selon la capacité du navigateur à utiliser la géolocalisation.

if (navigator.geolocation)

   alert("Bravo... Votre navigateur prend en compte la géolocalisation HTML5 !");

else

   alert("Dommage... Votre navigateur ne prend pas en charge la géolocalisation HTML5...");

Mais rassurez-vous, la majorité des navigateurs modernes supportent cette fonctionnalité.

Ensuite, pour obtenir les coordonnées, on utilise la méthode getCurrentPosition() qui prend en paramètre une fonction de “callback” qu’elle va appeler en lui fournissant le paramètre position contenant les coordonnées :

if (navigator.geolocation) {

   navigator.geolocation.getCurrentPosition(function(position)  {

     alert("Latitude:"+position.coords.latitude+", longitude:"+position.coords.longitude);

   });

}

else

   alert("Votre navigateur ne prend pas en charge la géolocalisation HTML5 !");

Dans l’exemple ci-dessus on affiche simplement par une boite pop-up la latitude et la longitude.

Mais, car il y a un « mais », ceci n’est possible que si l’utilisateur accepte de partager sa localisation !
Vous avez peut-être déjà remarqué le bandeau (sur les smartphones et les tablettes, c’est un pop-up) qui apparaît en haut de certaines pages (un bandeau similaire à celui qui vous propose d’enregistrer un mot de passe) ?
Il apparaît dès que l’on cherche à accéder aux coordonnées de l’utilisateur. Donc lorsque l’on utilise la méthode getCurrentPosition !

Lorsque l’on traite la variable position dans la fonction “callback”, on a accès à plusieurs attributs, dont voici la liste :

  • position.coords.latitude
  • position.coords.longitude
  • position.coords.accuracy : la précision d’obtention des coordonnées précédentes
  • position.timestamp : l’horodatage (au niveau du hardware) , en secondes, de l’heure à laquelle a été mise à jour la position
  • position.coords.altitude : l’altitude de l’appareil
  • position.coords.altitudeAccuracy : la précision de la mesure de l’altitude
  • position.coords.heading : l’angle compris entre 0 et 360° par rapport au Nord de l’appareil depuis le dernier relevé de position
  • position.coords.speed : vitesse de l’appareil par rapport à sa dernière position

Toutes ces valeurs sont remplies par l’API de géolocalisation et vous n’avez absolument pas besoin de les calculer vous-même.
Il est à noter cependant que les données obtenues pour la vitesse et pour l’angle par rapport au Nord sont souvent assez approximatives, il est donc préférable de les calculer à partir du timestamp et de la différence de position entre deux mesures consécutives [1].

Dans notre cas, nous n’avons besoin que de la latitude et de la longitude, mais avec une bonne précision d’obtention, car nous cherchons des lieux remarquables juste autour de nous.

Une bonne précision ?
Mais c’est possible !
En effet, la fonction getCurrentPosition() accepte des arguments en option qui permettent de définir son comportement (s’ils sont implémentés dans le navigateur utilisé) :

  • enableHighAccuracy (booléen) : true ou false, position la plus précise possible ou non
  • timeout (type long) : temps de réponse en millisecondes, durée avant renvoi vers la fonction d’erreur
  • maximumAge (type long ou Infinity) : durée de la mise en cache en millisecondes de la position courante. Si maximumAge:0 alors la position ne viendra jamais du cache et elle sera toujours renouvelée (mesurée à chaque appel)

On aura donc pour notre problématique le code suivant (avec un choix d’une valeur de 5 secondes de timeout) :

{enableHighAccuracy:true, timeout:5000, maximumAge:0}

Mais que se passe-t-il si une erreur survient ?
Comment savoir si les données reccueillies sont « bonnes » ?

Là encore il y a une solution. En effet nous avons parlé de la fonction “callback” utilisée pour obtenir les coordonnées, mais il existe aussi une fonction “callback” pour traiter les erreurs !
C’est bien fait tout de même, non ?

L’écriture complète de la méthode getCurrentPosition est donc :

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

Lorsque la fonction de “callback” de gestion des erreurs est appelée, elle a pour argument un objet de type PositionError, dont voici la liste des propriétés :

  • UNKNOW_ERROR : erreur inconnue (là on se sent impuissant...)
  • PERMISSION_DENIED : l’application n’a pas l’autorisation d’utiliser l’API de géolocalisation (car l’utilisateur ne l’a pas autorisé)
  • POSITION_UNVAILABLE : la position n’existe pas ou l’emplacement de l’appareil n’a pas pu être déterminé
  • TIMEOUT : erreur de timeout, le service de géolocalisation ne répond pas assez vite

Maintenant nous pouvons compiler tout ce que nous avons vu pour écrire une source de gestion complète de la géolocalisation :

<script type="text/javascript">

if (navigator.geolocation)

 navigator.geolocation.getCurrentPosition(successCallback, errorCallback,{enableHighAccuracy:true, timeout:5000, maximumAge:0});

else

 alert("Votre navigateur ne prend pas en charge la géolocalisation HTML5");

  

function successCallback(position){

 alert("Latitude:"+position.coords.latitude+", longitude:"+position.coords.longitude+" avec une précision de "+position.coords.accuracy+" mètres");

}); 



function errorCallback(error){

 switch(error.code){

   case error.UNKNOW_ERROR:

     alert("Erreur inconnue... Bon courage !");

     break;      

   case error.PERMISSION_DENIED:

     alert("L'utilisateur n'a pas autorisé l'accès à sa position");

     break;      

   case error.POSITION_UNAVAILABLE:

     alert("L'emplacement de l'appareil n'a pas pu être déterminé");

     break;

   case error.TIMEOUT:

     alert("Le service n'a pas répondu à temps");

     break;

   }

});

</script>

Ici nous avons choisi d’afficher en cas de réussite de la géolocalisation les coordonnées avec la précision de mesure par un pop-up.
Mais on peut tout à fait faire autre chose, comme par exemple écrire les informations dans une base de données, afficher sa position en temps réel sur une carte, rechercher des lieux remarquables juste à côté de soi, etc.

Une idée serait par exemple d’utiliser les coordonnées transmises à un serveur pour localiser les amis (utilisant le même service) autour de soi et ainsi par exemple découvrir une connaissance dans le même TGV, ou dans la même rue... Un simple coup de téléphone permet de boire un café ou un verre alors !

Pour ceusses qui ont tout lu jusque ici... Bonnes programmations !

P.-S.

Notes

[1] Pour calculer la distance entre deux points A(lat1,lon1) et B(lat2,lon2), il suffit d’appliquer la formule de Haversine qui se code en PHP par la source suivante :

function distance($lat1, $lon1, $lat2, $lon2)  {

        $lat1 = deg2rad($lat1);

        $lat2 = deg2rad($lat2);

        $lon1 = deg2rad($lon1);

        $lon2 = deg2rad($lon2); 

        $R = 6371;

        $dLat = $lat2 - $lat1;

        $dLong = $lon2 - $lon1;

        $a= pow(sin($dLat/2), 2) + cos($lat1) * cos($lat2) * pow(sin($dLong/2), 2);

        $c= 2 * atan2(sqrt($a),sqrt(1-$a));

        $d= $R * $c;

        return $d;

}

Ce script retourne alors une valeur (en kilomètres) représentant la distance entre A et B.