Bienvenue à Blogs CodeS-SourceS Identification | Inscription | Aide

[HTML5] Utiliser l’API de Géolocalisation : Part I

Voici une série d’articles techniques sur l’API de géolocalisation HTML5. Nous aborderons à travers plusieurs parties, chaque points importants de cette API , actuellement de plus en plus utlisée, quelques explication techniques du quid, de la pratique basique, en passant par la complexité de gestions des anciens navigateurs, des exemples cas de productions types  (marketing, e-commerce etc…).   

  1. Introduction à l’API

  2. Comparaison entre navigateurs

  3. Dans la pratique
  4. Support des navigateurs non HTML5 Compliant (Progressive enhancement)
  5. Exemples d’utilisations concrets, intégration à l’aide des API existantes. 

 

Part I : Présentation de l’API Géolocalisation HTML5

 

image

Geolocalisation, géolocaliser ?

Tout d’abord, la géolocalisation, c’est quoi ? Globalement c’est le fait de pouvoir être localiser, selon un référentiel, ici notre planète, n’importe où nous sommes, lors de nos déplacements etc. Exemple typique : un GPS. Selon la position courante, le GPS nous situe sur une carte, puis nous dirige vers une direction, selon une destination.

Actuellement la géolocalisation est pratiquement omniprésente, principalement grâce à notre téléphone, GPS,  ou connexion internet…

 

 

HTML5 et la géolocalisationimage

Grâce à HTML5, L’api de géolocalisation de HTML5, nous fournit, plusieurs méthodes ( pour rappel : nous sommes coté client, en JavaScript ), permettant de localiser, précisément et simplement , l’utilisateur courant, bien sûr sous son consentement. Le degré de précisions des coordonnées varient selon plusieurs facteurs que nous verrons au long de ce post. Concernant votre propriété privé, lors d’une requête de position, l’utilisateur est automatiquement averti de cette requête,  et choisi d’accepter ou non de partager sa position.

Exemple sur Internet Explorer 9 :

image

 

 

 

Ainsi, nous pouvons récupérer, simplement , la latitude et longitude de l’utilisateur, de manière à l’exploiter sous différentes formes : GeoTagging, localisation de visites, réalité augmentée etc.,  présentation à l’aide d’API cartographiques comme Bings Maps. Le point important de cette API est qu’elle est totalement transparente de la device qui l’utilise, que vous naviguiez sur devices mobiles ou Desktop.

Note : L’api de géolocalisation n’est actuellement pas intégrée dans les spécifications officielles de HTML5. Celle-ci a uniquement été développée par le W3C, non par le WHATWG. Vous pourrez trouver les spécifications par le W3C ici.

 

Comment sommes nous géolocalisés ?

La façon dont nous sommes géoloclisés dépend fortement de la source matérielle avec laquelle nous naviguons. Plusieurs sources sont utilisés pour obtenir les coordonnées de l’utilisateur, chaque source à sa propre spécificité, et implique également son propre niveau d’ exactitude :

  • IP Geolocation, (Exemple)
  • Wi-Fi et Bluetooth avec adresses MAC
  • Puces GSM/CDMA
  • Global Positioning System (GPS), Assisted Global Positioning System (A-GPS)

imagesPour un téléphone, une trilatération est utilisée, basée sur les angles d’un point mobile : vous, vers plusieurs tours émettrices proches (cf schéma ci-contre : A notre position, Px les émetteurs).

Pour un PC de bureau, nous parlons de triangulation par Wifi, ou par géolocalisation par IP, sachant que ce dernier détient une précision se tenant au niveau des villes (basée sur les positions des répartiteurs Telecom, qui peuvent couvrir plusieurs villes).

  • La plupart des devices mobiles équipées de puces GPS, disposent de 2 niveaux de géolocalisation : 
    • -          Premier niveau  très rapide utilisant la trilatération ( sur Windows Phone 7, la pile de localisation) , sans puce GPS, idéal pour une simple prise de position, sans besoin de très hautxe précision.
  • -          Deuxième niveau  plus lourd, basé sur le système GPS de la device (si présent),  permettant de géolocaliser avec une grande précision ( quelques mètres ), idéal pour générer par exemple un tracking de position.

L’inconvénient de l’utilisation de la géolocalisation par GPS , est la consommation de batterie, et le temps d’initialisation. Cette deuxième méthode doit, dans un premier temps, initialisée le système GPS, pour ensuite le requêter. Sur les devices mobiles , l’utilisation du système GPS est  très consommatrice en énergie, surtout en Tracking mode ou celui-ci est interrogé à intervalles réguliers. Cependant, ce procédé permet une exactitude exclusive des informations.

image

La notion de précision est très importante dans l’utilisation de l’ API de Géolocalisation HTML5, puisqu’il vous sera possible de contrôler le degré d’exactitude de la requête de localisation selon un bas / haut niveau de précision.

Des API de cartographie interactives comme Bings Maps, ou Google maps sur devices mobiles, utilisent ses 2 procédés :

  1. Première localisation par IP / Wifi à faible précision ( cercle de grande circonférence ) .
  2. Seconde localisation ( si système GPS autorisé ) , affinement de la localisation ( cercle de petite circonférence).    

La circonférence du cercle indique le degré d’ erreur potentiel de l’estimation de votre position. Celle-ci variant en fonction des procédés utilisés techniquement pour effectuer la géolocalisation.

Notes : Le référentiel géographique de coordonnées utilisé par cette API est celui généralement utilisé pour tous systèmes de géolocalisation (WGS84 World Geodetic System). Ce qui implique que les coordonnées renvoyées par l’API peuvent être communément exploitées.

Notes bis : Si la géolocalisation vous intéresse, je vous invite à lire le blog de mon collègue Nicolas Boonaert, MVP Bing maps.

 

 

Les navigateurs et la géolocalisation HTML5

image

 

Actuellement, la quasi-totalité des versions up-to-date des browsers actuels implémentent l’API de géolocalisation HTML5.  Pour les anciennes versions de browsers, des polyfills peuvent être utiliser afin de reproduire au mieux l’expérience utilisateur de l’api. Nous verrons cela partie 3 de ce post.

 

  • Du coté Desktop :
Navigateur Version Support

Internet Explorer

9.0+
   image

Chrome

4.0 (Gears API)
   image

Chrome

5.0+
   image

Firefox

3.5+
   image

Safari

5.0+
   image

Opera

10.60+
   image
 
  • Du coté mobile :
Navigateur Version Support
image
Windows Phone 7

Mango
image
image
Android

2.0+
image
image
Opera Mobile

10.1+
image
image
Symbiam Mobile

S60 3+
image

Blackberry

6.0
image
image
Maemo

5.0
image

 

On remarque que le support de cette API est assez étendu sur les navigateurs actuels. Firefox fut le premier a intégré la gestion de la géolocalisation dans sa version 3.5. Pour pouvoir vous localiser, chaque navigateur rassemblent les informations sur les points d'accès sans fil alentour et l'adresse IP de votre ordinateur, puis les envoient à un provider de Géolocalisation. Par exemple pour Google et Firefox, vos données sont envoyées au Google Location Services, afin d’estimer votre localisation.

Idem pour les navigateurs mobiles dernière génération, pratiquement toutes les devices mobiles actuels sont équipés ,soit de puce GPS ou de connexion internet. Cependant, gardez toujours à l’esprit que le parc de mobiles est loin d’être complètement “Next Gen”, et qu’il est indispensable, si vous voulez garder la même expérience utilisateur (Oui oui c’est possible) CF prochainement un prochain post sur le progressive enhancement / gracefully degradation sur les terminaux non compatibles.

 

A suivre …  Partie 2 : Comparaison entre navigateurs, précisions, temps de réponses, procédés utilisés selon les cas…

Publié mardi 11 octobre 2011 23:26 par Gio
Classé sous : ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires

Pas de commentaires
Les commentaires anonymes sont désactivés

Les 10 derniers blogs postés

- Merci par Blog de Jérémy Jeanson le 10-01-2019, 20:47

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01