Ingénieur IT, photographe amateur, musicien du dimanche
Géolocalisation
Géolocalisation

Géolocalisation

window.onload = function(){

	//Si on a l'autorisation de géolocaliser
	if(navigator.geolocation){
		function succesGeo(position){
			var infopos = 'Ma position => ';
				infopos += 'Latitude: '+position.coords.latitude+' - ';
				infopos += 'Longitude: '+position.coords.longitude;
				document.getElementById('position').innerHTML = infopos;

				//instancier un objet coordonnée google maps selon l'API
				var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

				//option pour centrer la carte sur notre position
				var optionsGMaps = {
					mapTypeControl: false,
					center: latlng,
					navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					zoom: 15
				};

				//initialiser la carte selon nos paramêtres
				var map = new google.maps.Map(document.getElementById('mapGoogle'), optionsGMaps);

				//ajout d'un 'flag' sur notre position
				var marker = new google.maps.Marker({
					position: latlng,
					map: map,
					title: 'Votre emplacement !'
				});
		}

		//requête de géolocalisation
		navigator.geolocation.getCurrentPosition(succesGeo);
	}
}

Introduction

La géolocalisation est devenu omniprésente dans nos vies ces dernières anneés. L’arrivée des technologies mobiles et les connexions Internet de accessible dans de nombreux endroits incitent de plus en plus les gens à partager des lieux afin de faire savoir où ils sont, où ils vont, etc.
Cela demande une infrastructure, des outils et des connaissances conséquentes, mais au final pas tant que ça grâce aux outils HTML5, OpenLayer, OpenStreetMap, Google Map ou tout autres possibilités qu’elles soient libres ou non.

La composante géographique de la géolocalisation est basée sur 3 notions:

  • La latitude
  • La longitude
  • et l’altitude

cette dernière étant moins importantes, vu que nous voulons juste nous situer sur une carte.
Ces données sont informées à l’aide de plusieurs méthodes de positionnement tels que :

  • Les GPS
  • Les adresses IP (à l’aide de données de l’IANA et des fournisseurs d’accès)
  • Par triangulation
    • de réseau de téléphonie (GSM, 3G,…)
    • de réseau WiFi, BlueTooth,…

Nous pouvons donc utiliser une de ces méthodes, mais également en coupler plusieurs selon les besoins.

L’exemple Google Map

Il est possible que votre position ne soit pas exact. Comme expliqué plus haut, il existe plusieurs méthodes de positionnement dont la précision varie. Par exemple, le positionnement par adresse IP tel qu’uilisé par le browser de votre ordinateur définira le lieu de votre fournisseur d’accès et non votre position actuel. Un téléphone avec puce GPS sera lui positionné là où vous vous trouvez (avec une précision à quelques mêtres près).

Le code

Tout d’abord il faut définir l’endroit où sera affiché la carte (map). Une div semble être l’élément approprié sur lequel vous pourrez ajouter une CSS directement dans le code où par le biais d’un fichier séparé. Afin d’y accéder facilement, un ID est également définit comme attribut.
<div id="mapGoogle" style="width:500px;height:400px;border:1px solid #666;"></div>

Le code permettant de définir ses coordonnées n’est pas trop verbeu. Il se résume surtout à la ligne suivante, qui demande au navigateur de transmettre la position actuelle.
<script>navigator.geolocation.getCurrentPosition();</script>

getCurrentPosition() effectue une requête unique. Pour suivre la position, il faudrait utiliser la fonction « watchPosition() »!

Mais cette ligne seule n’est pas suffisante si nous voulons afficher les informations à l’utilisateur. Pour cela nous allons modifier ce code afin d’imprimer dans la div créée précédement les coordonnées de l’utilisateur.

<script type="text/javascript">
//requête de géolocalisation
function succesGeo(position){
    var infopos = "Latitude: "+position.coords.latitude+" et "+"Longitude: "+position.coords.longitude;
    document.getElementById("mapGoogle").innerHTML = infopos;
}
navigator.geolocation.getCurrentPosition(succesGeo);</script>

Maintenant que nous avons ces coordonnées, il est plus parlant de les mettre dans une carte que d’afficher le texte comme nous l’avons fait. Pour cela, nous utilisons l’API Google Map (pour plus de détail se réferer à la documentation de cette API. Le lien est dans l’introduction).
Commençons par charger l’API : <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Dès que cela est fait, il ne nous reste plus qu’à paramêtrer l’affichage de la carte, et lui lier notre point de coordonnée plutôt que de l’afficher en texte dans la div:

//Création du point de coordonnée au format google map
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		
//option pour centrer la carte sur notre position
var optionsGMaps = {
    mapTypeControl: false,
    center: latlng,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 15
};

//initialiser la carte selon nos paramêtres
var map = new google.maps.Map(document.getElementById("mapGoogle"), optionsGMaps);

//ajout d'un "flag" sur notre position
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "Votre emplacement !"
});

Pour approfondir le sujet…

Ce n’est là qu’un exemple de ce qui est possible de faire. Pour plus d’informations, je conseille de vous intéresser aux documentations HTML5 ou aux nombreux sites qui en parlent.
Un livre très bien écrit existe également sous le nom de « HTML5, une référence pour le développement web » aux editions eyrolles. Il a été rédigé par Rodolphe Rimelé, le cofondateur d’alsacréations (la qualité du site et de ses tutoriaux devrait vous donner une idée de la qualité du livre!).

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *