Géolocalisation
jeudi 10 décembre 2009, par
Introduction
Vous avez surement vu se multiplier les sites et applications de réalité augmentée utilisant vos coordonnées géographiques pour vous apporter de l’information pertinente. Intrigué comme toujours par une nouvelle technologie, j’ai souhaité comprendre son fonctionnement pour éventuellement développer de nouvelles applications web.
L’iPhone semble proposer cette fonctionnalité, mais Apple empechant le dev sur iPhone à moins d’avoir un mac, et encore, à condition de payer, j’ai cherché un autre moyen. Certains sites internet proposent déjà une localisation via le navigateur web. Cela présente l’énorme avantage de s’affranchir du support, la géolocalisation n’est plus limitée à un type de téléphone, et fonctionne même sur un ordinateur.
Mais trouver de l’info sur le sujet a été plus long que prévu. J’espère donc vous faire gagner un peu de temps en partageant ici, en une synthèse, ce que j’ai pu comprendre de la géolocalisation.
Objectif
Je vais vous présenter les deux technologies qui existent au moment de la rédaction de cet article. Tout d’abord les fonctions du standard W3C qui commence à être implémentées par la plupart des navigateurs. Puis, les fonctions de géolocalisation offertes par la suite Google Gears, qui permet de prendre le relai lorsque le standard n’est pas présent. Enfin nous verrons comment s’affranchir de la plateforme en unifiant les deux technos au travers d’un exemple.
Technologies existantes et techniques de localisation
Evidemment cela aurait été trop simple si il n’y avait qu’un seul standard. J’ai recensé deux technologies de géolocalisation.
Le W3C, un consortium en charge de l’élaboration de standards du web, a défini une API que les dernières versions des navigateurs commencent à implémenter.
De son côté, Google a développé son propre outil, en intégrant des fonctionnalités de géolocalisation à Google Gears. Il s’agit d’une suite logiciel qui fournit des fonctions supplémentaires pour permettre une navigation plus évoluée.
Mais dans les deux cas, le principe en charge de la géolocalisation est le même. Après autorisation de la part de l’utilisateur, le navigateur communique à un serveur de localisation l’ensemble des informations utiles, qu’il a à sa disposition, pour les traduire en coordonnées géographiques : adresse IP, réseau wifi à portée, BTS, information A-GPS, ... En retour, le serveur de localisation fourni les coordonnées géographiques qu’il a déduit, en croisant les informations avec différentes bases de connaissances.
Standard W3C
Google Gears
Multi-plateforme
<head>
// Inclusion de la librairie javascript Google Gears
<script type="text/javascript" src="gears_init.js"></script>
// Inclusion de la librairie javascript pour l'API Google Maps avec la clé d'utilisation
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=MaCleGoogleMaps"></script>
// Inclusion de la librairie javascript pour l'API AJAX pour Google Maps
<script type="text/javascript" src="gmap.js"></script>
// Début de la partie pour la géolocalisation
<script type="text/javascript">
// Test de la compatibilité de navigateur avec l'api google maps
if ( ! GBrowserIsCompatible() ) return false ;
// Initialisation de la variable pour connaitre la méthode de localisation utilisée
var methodo = "Pas encore localisé.";
// Fonction fournissant un outil de localisation compatible avec la plateforme où est exécuté le script
function outilGeoloc()
{
// Test si le navigateur implémente le standard W3C
if ( navigator.geolocation ) {
// Si ok, on utilise le localiseur standard
methodo = "Location API" ;
return navigator.geolocation ;
}
// Sinon on test si Google Gears est accessible
var geogears = google.gears.factory.create('beta.geolocation') ;
if ( geogears ) {
methodo = "Google Gears" ;
return geogears ;
}
// Ajouter le cas par défaut ou rien ne fonctionne ?
}
// Fonction de recherche des coordonnées géographiques
function trouvePosition()
{
// Récupérer un outil de géolocalisation disponible sur la plateforme client
var localiseur = outilGeoloc();
// Appel à la fonction de géolocalisation, heureusement standard elle...
localiseur.getCurrentPosition(trouve, pasTrouve);
}
// Fonction a exécuter si la position a été trouvée
function trouve(position)
{
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.getElementById("map_lng").value = long;
document.getElementById("map_lat").value = lat;
document.getElementById("methodo").value = methodo;
gmap_load('map', long, lat, 17);
point = new GLatLng(48.838338, 2.280073);
markerOptions = {clickable:true, draggable:false };
marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
marker.info_window_content ='<strong>Home</strong><p>Paris</p>'
marker.bindInfoWindowHtml(marker.info_window_content, {maxWidth:200});
GEvent.addListener(marker, "click", function() {
map.panTo(point, 2);
});
}
// Fonction a exécuter si la position n'a pas été trouvée
function pasTrouve()
{
document.getElementById("map_lng").value = '';
document.getElementById("map_lat").value = '';
document.getElementById("methodo").value = 'Impossible de vous localiser.';
gmap_load('map', 2.294351, 48.858844, 17);
}
// Fonction de détection du type de navigateur web utilisé par le client
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map");
// Si le client est un mobile, on adapte l'affichage à la taille du support
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '320px';
mapdiv.style.height = '200px';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '400px';
}
}
// Fonction d'initialisation de la géolocation, appelée une fois la page chargée
function initialisation() {
trouvePosition();
detectBrowser();
}
</script>
// Quelques meta tags pour contraindre / parametrer l'affichage sur support mobile
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport">
</head> Exemple de mise en oeuvre
En attendant que je mette en ligne l’article, une petite démo ici :
La démo n’est plus disponible
