Vous le savez surement tous, HTML5 devient la référence dans le développement web. Une des ses fonctions intéressantes et l’ajout de l’API de Géolocalisation. Cette API permet à vos utilisateurs de partager leur géolocalisation avec votre web application afin de profiter des services localisés. Découvrez comment ajouter cette fonction à votre web-application simplement. Nous verrons dans un autre article comment intégrer ces fonctions à WordPress, afin de proposer du contenu géolocalisé, lorsque vous en possédez.

La géolocalisation vous permet, en tant que développeur ou propriétaire d’un site internet, de définir où se trouve un utilisateur en particulier sur la planète. Les applications sont multiples, comme par exemple sur un site social, vous pourrez mettre en relation les gens qui sont proches les uns des autres, ou afficher sur une carte les avis que vous auriez écrit sur des magasins proches de chez eux.

La géolocalisation de vos utilisateurs

Par le passé, la géolocalisation basée sur l’adresse IP était la seule façon de récupérer la position d’un utilisateur sur la carte.

Maintenant que

Geolocation

est disponible nativement en tant qu’API dans HTML5, il est devenu extrêmement simple pour les développeurs de rapidement intégrer des services basés sur la géolocalisation d’un utilisateur dans leurs applications ou sites internet.

Détecter les navigateurs compatibles

La première étape est important. Avant de lancer toute sorte de fonction géolocalisée, vous devez vérifier que le navigateur de votre utilisateur est compatible. La façon la plus simple pour le faire est d’utiliser l’objet global « navigator ».

if(navigator.geolocation) {
    // Geolocation supported. Do something here.
}

Enregistrer la position de l’utilisateur

Une fois cette vérification faite, nous pouvons utiliser le code suivant pour utiliser la position de l’utilisateur :

navigator.geolocation.getCurrentPosition(success_handler, error_handler);

Cet appel exécutera la fonction callback

success_handler

si la requète a fonctionné, ou

error_handler

si une erreur et survenue. La donnée de position est disponible dans l’objet

position

pour la fonction

success_handler

.

function success_handler(position) {
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        accuracy = position.coords.accuracy;
    }

Voici une liste des données disponibles :

Vie privée de l’utilsiateur

Lorsqu’un utilisateur utilise visite votre site pourvu de ces fonctions, il reçoit une notification lui demandant la permission d’utiliser sa position dans son navigateur, comme l’image ci dessous.

Précision et mode de fonctionnement

Une fois que l’utilisateur a donné sa permission, son navigateur va rassemble les informations à propos du point d’accès le plus proche, ainsi que l’adresse IP de l’ordinateur (ou autre support), qu’il enverra ensuite au fournisseur du service de géolocalisation (Google Location Services dans le cas de Firefox et Chrome), afin de récupérer la position. Cette position est ensuite renvoyée au site qui la demande.

Comme vous l’avez surement remarqué dans les valeurs retournée (tableau ci-dessus), il existe une variable

accuracy

représentant la précision avec laquelle le service de géolocalisation aura retournée la position. Vous pouvez l’améliorer dans certains cas en passant l’option getCurrentPosition à votre fonction. Notez bien que cette variable ne sera pas forcément utilisée. Tout dépendra du support qui est utilisé pour naviguer, ainsi que de l’OS et du service de géolocalisation.

navigator.geolocation.getCurrentPosition(
                                    success_handler, 
                                    error_handler, 
                                    {enableHighAccuracy:true});

Si votre application est destinée à être utilisée sur mobile, il est même prudent de sécuriser la demande en ajoutant un timeout à votre fonctione. Si le timeout est dépassé, refaite la demande en enlevant la demande de précision :

Sauvegarder la position dans les cookies

Une fois la position récupérée, il est pratique de la sauvegarder dans la session de l’utilisateur afin de pouvoir la réutiliser sur d’autres pages.
Voilà un exemple pour le faire dans un cookie, avec le plugin jQuery cookie :

function success_handler(position) {
        
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        accuracy = position.coords.accuracy;

        $.cookie("posLat", latitude);
        $.cookie("posLon", longitude);
        $.cookie("posAccuracy", accuracy);
    }

Lorsque vous voudrez retrouver la position de votre utilisateur, il suffira de consulter le cookie :

if($.cookie("posLat")) {
    latitude  = $.cookie("posLat");
    longitude = $.cookie("posLon");
    accuracy  = $.cookie("posAccuracy");

}

Mise à jour de la position

Dans l’exemple au dessus, la position est lue une seule fois et enregistrée dans la session pour une utilisation future. Si vous souhaitez suivre votre utilisateur dans ses déplacements, comme un GPS par exemple, l’API fournit une autre fonction

navigator.geolocation.watchPosition

qui récupèrera automatiquement la nouvelle position si elle change. Cette fonction est similaire à

getCurrentPosition

, la seule différence est qu’elle retourne en continu la nouvelle position.

var watch_id = navigator.geolocation.watchPosition(
                                        success_handler, 
                                        error_handler
                                        );

Cette fonction retourne un ID unique qui vous permettra d’arrêter le suivi de l’utilisateur par la suite si vous le souhaitez, avec par exemple :

navigator.geolocation.clearWatch(watch_id);

Quelques exemples

Pour terminer, voilà quelques exemples simples pour vous montrer comment utiliser l’API avec d’autres outils.

Utilisation avec OpenStreetMap :

Utilisation avec GoogleMaps (sélectionnez HTML):