Editions ENI Livres | Vidéos | e-Formations
Géolocalisation
Principe de la géolocalisation
L’API HTML5 de géolocalisation offre la possibilité à l’utilisateur de l’application de connaître sa position géographique (latitude et longitude).
Pour réaliser ce repérage spatial, nul besoin d’avoir recours à une quelconque bibliothèque additionnelle car cette fonctionnalité est nativement intégrée dans les navigateurs récents, y compris dans les smartphones (iPhone, Android...).
Parmi les principales applications utilisant les mécanismes de géolocalisation nous trouvons Google Map, Google Street View ou encore Google Earth. Il s’agit en réalité d’API pouvant être employées dans vos propres développements.
Les exemples présentés dans la deuxième partie de ce chapitre utilisent justement les API de Google.
Vous saurez donc à la fin de ce chapitre utiliser une carte Google Map avec une grande précision (centrage, zoom, annotation, passage dans les différents modes de visualisation...) et vous pourrez développer des applications basées sur la géolocalisation (repérage de points d’intérêt sur une carte, trajets, distances, calcul de vitesse, géomarketing, applications communautaires basées sur la géolocalisation, utilisation de surcouches comme par exemple...
Exemples d’applications de géolocalisation
1. Exemple 1 : Affichage de la carte de l’Ouest de la France
Dans ce premier exemple nous allons mettre en œuvre les fonctionnalités de base de l’API de géolocalisation nativement incluse dans HTML5 et en conséquence prises en compte par les navigateurs récents (y compris sur les smartphones).
L’objectif est très simple : afficher à l’écran un fond de carte Google Map présentant la région Ouest de la France avec un centrage de la carte sur la ville de Rennes.
Dans la mesure où il s’agit de notre premier exemple de cartographie, le script HTML/JavaScript est reproduit ci-après dans son intégralité (ce ne sera pas systématiquement le cas pour les exemples suivants) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--
NOM DU SCRIPT : GEO_01.htm
REALISATION INFORMATIQUE : Christian VIGOUROUX
DATE DE CREATION : 15/10/2018
DATE DE DERNIERE MODIFICATION : 15/10/2018
OBJET : Gestion carte Google Map
Carte de l'Ouest de la France (centrage sur Rennes)
-->
<!-- Début script HTML -->
<html>
<!-- Début en-tête script HTML -->
<head>
<!-- Balise meta http-equiv & content -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Balise meta définissant la zone affichable -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
<!-- NB : Le méta tag viewport précise au navigateur le comportement
<!-- qu'il doit adopter pour afficher une page -->
<!-- initial-scale=1.0 : Ouverture de la page avec une échelle à 100 % -->
<!-- user-scalable=yes : Zoom possible de la part de l'utilisateur -->
<!-- Feuille de styles CSS -->
<style type="text/css">
html, body, #maCarte {
margin: 0;
padding: 0;
height: 80%;
}
</style>
<!-- Titre du script HTML -->
<title>GEO_01</title>
<!-- Appel de l'API Google Map -->
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=ma_cle_api_google_map">
</script>
<!-- Script JavaScript de mise en place de la carte -->
<script type="text/javascript">
/* Fonction d'initialisation de la carte */
...
