P54034



Avant-propos

Le marché de la géolocalisation est en pleine effervescence, comme le prouve l'annonce de lancement par Facebook, en août 2010, de son service Places, qui permet de partager sa position géographique avec ses amis, mais aussi, et c'est très probable, avec des annonceurs...

La carte a toujours été un outil de pouvoir – que ce soit à une échelle locale pour calculer le montant de l'impôt chez les Égyptiens ou encore à grande échelle pour la domination maritime mondiale lors des explorations maritimes du XVe siècle.

L'évolution de la technique, l'apparition de l'informatique le siècle dernier et l'impressionnante démocratisation de l'Internet ont encore renforcé la place centrale de la carte dans notre société. Google, en mettant à disposition du monde entier et de manière gratuite une cartographie mondiale détaillée, a grandement favorisé l'essor de cette nouvelle technique qu'est la cartographie dynamique (ou webmapping). Google Maps en est l'exemple le plus connu et représentatif.

La force de Google a été de donner aux développeurs web, dès juin 2005, la possibilité d'ajouter leurs propres cartes et créations via l'utilisation d'une interface de programmation JavaScript. Le succès fut alors immédiat, et des milliers de sites web utilisent ce service pour enrichir d'une touche géographique leur contenu.

Depuis 2005, Internet a beaucoup évolué, et l'apparition des périphériques mobiles de type smartphones est un fait majeur de ces cinq dernières années. La capacité de ces nouveaux outils à naviguer sur la toile a favorisé l'essor de nombreuses applications, autrefois destinées aux seuls ordinateurs de bureau – et beaucoup d'entre elles embarquent une carte.

Nous allons découvrir dans cet ouvrage tout d'abord comment utiliser l'API Google Maps pour développer des applications web classiques, puis dans la seconde partie, nous aborderons le développement d'applications spécifiques destinées aux téléphones mobiles iPhone et Android.

1.À qui s'adresse ce livre ?

Ce livre est destiné principalement aux développeurs de sites web qui souhaiteraient enrichir leurs pages web de cartes dynamiques. Une connaissance des langages HTML et JavaScript est donc souhaitable pour tout internaute désireux d'apprendre ou d'approfondir les différentes API Google Maps.

Cependant, avec l'émergence actuelle des smartphones, nous ne pouvions ignorer le développement d'applications cartographiques sur ces plateformes particulières. C'est pourquoi la seconde partie de l'ouvrage est destinée aux développements sous iOS et Android, pour lesquels une connaissance des SDK spécifiques à ces systèmes d'exploitation et d'un langage de programmation sera nécessaire.

De toutes les manières, une familiarité avec Google Maps en temps qu'utilisateur est souhaitable, et un intérêt pour la représentation de données géographiques sur Internet seront bien sûr un plus...

1.Suppléments web

Le site www.geotribu.net/dunod présente la plupart des exemples de démonstration de cet ouvrage, mais aussi l'application complète étudiée au chapitre 5. Les exemples sont actifs, ce qui permettra au lecteur de visualiser en regard le code et son résultat.

1.Remerciements

L'écriture de ce livre n'aurait pas été possible sans l'aide précieuse d'Arnaud Van De Casteele, cofondateur du site GeoTribu et avec qui nous échangeons régulièrement sur le webmapping, les nouvelles technologies Internet et bien d'autres choses encore. Merci Arnaud !

Nous remercions également Laurent Jégou pour sa disponibilité et son aide technique de tous les jours.

Enfin, ce livre n'aurait pu être publié sans l'intérêt pour son sujet exprimé par notre éditeur, Jean-Luc Blanc. Qu'il soit remercié ici pour sa confiance et son implication dans la réalisation de ce projet.


Partie 1

L'API Google Maps version 3

La conception d'applications cartographiques pour le Web est passionnante. Elle oblige à être au fait des nouvelles technologies et donc de faire une veille permanente. C'est ainsi que les solutions de développement proposées par Google deviennent intéressantes. En effet, depuis mai 2010, la firme de Moutain View propose une nouvelle API de Google Maps qui a la particularité de pouvoir facilement être utilisée sur plusieurs plates-formes : ordinateurs classiques et périphériques mobiles (smartphones).

Trois approches de développement sont possibles lors du développement d'une application cartographique pour le Web :

Dans cette première partie, nous verrons le développement d'applications cartographiques via la première approche, en n'utilisant que l'API Google Maps. À travers une description détaillée des classes d'objets et des services, nous arriverons à la conception d'une application complète.

Par ailleurs, l'annexe A fera découvrir l'API OpenLayers, une concurrente open source de l'API Google Maps. Nous essaierons ainsi de pointer les différences majeures entre ces deux technologies.

Chapitre 1. Les concepts

Chapitre 2. Débuter avec l'API Google Maps


Chapitre 1

Les concepts

Objectifs

La cartographie dynamique sur Internet est une technique nouvelle de représentation de données géographiques. Elle s'appuie sur les technologies web pour permettre à l'internaute de naviguer dans des cartes et d'aller chercher lui-même l'information dont il a besoin.

L'API Google Maps a permis de démocratiser cette nouvelle technologie, que l'on nomme également « Web mapping ».

1.1.  Cartographie dynamique sur le Web

La cartographie dynamique sur le Web est une forme de cartographie récente dans l'histoire de la géographie. Il s'agit d'une cartographie où l'utilisateur est acteur de sa découverte d'informations : il zoome, il change de fond de carte, il ajoute ou modifie des informations.

D'une manière simplifiée, la cartographie dynamique regroupe l'ensemble des technologies permettant d'afficher une carte sur le Web.

Ces technologies reposent principalement sur les trois composantes que sont le client, le serveur et les données. La cartographie dynamique permet donc, en fonction d'une requête d'un client envoyée au serveur cartographique, de retourner les données désirées sous la forme d'une carte (voir figure 1.1).

1-2_v3Fig1.eps
Fig. 1.1  Organisation d'une application de cartographie numérique

Une application reposant sur l'API Google Maps est un exemple représentatif de ces nouvelles technologies de cartographie dynamique. L'internaute, via son client web – son navigateur – demande aux serveurs Google les cartes qu'il désire visualiser à travers l'interface de navigation. Google lui restitue cette information sous la forme d'images, appelées « tuiles », assemblées dans l'interface de navigation. À chaque nouvelle demande – un déplacement par exemple – l'application web repose une requête aux serveurs, qui envoient l'information correspondante ; cet échange se fait de manière transparente, les interactions entre le client et le serveur devant être les moins intrusives possible.

1.2.  L'interaction client/serveur

1.2.1.  AJAX

AJAX (Asynchronous JavaScript and XML) est la terminologie qui a été employée pour désigner les applications riches, dynamiques et interactives qui ont pour support Internet et qui fonctionnent donc à l'aide de navigateurs web.

L'utilisation de la classe XmlHttpRequest – introduite par Microsoft en 2000 – a rendu possible l'émergence d'un nouveau type d'applications pour le Web. Celles-ci sont fluides et rapides et ne nécessitent pas le rechargement complet de la page web sur laquelle l'internaute navigue lorsqu'il sollicite des ressources provenant du serveur.

Cette interaction entre client et serveur via cette classe XmlHttpRequest est à la base du Web 2.0. L'augmentation constante des débits de connexion à Internet et l'amélioration continue des navigateurs font des applications Web de véritables logiciels à part entière.

1.2.2.  Google Maps, le meilleur exemple d'application AJAX

Apparu en 2004, Google Maps est un service gratuit de cartographie en ligne. La possibilité de naviguer à travers le monde entier de manière fluide avec une simple connexion Internet a fait de ce projet un véritable succès.

En 2010, le Web compte près de 350 000 sites proposant une composante de cartographie utilisant la technologie Google Maps. Le succès de cette API a été et reste toujours la mise à disposition d'une interface de programmation gratuite à destination des développeurs, leur permettant d'intégrer de la cartographie dynamique dans leurs propres sites web.

1.3.  Environnement de développement

Le développement de sites web ne nécessite que peu d'outils spécifiques et est par conséquent peu onéreux sur un plan matériel ; un investissement léger permet de commencer immédiatement.

Un simple éditeur de texte sera donc amplement suffisant pour commencer à programmer des cartes dynamiques via l'API Google Maps : Gedit sous Unix ou Notepad++ sous Windows par exemple. Cependant, un éditeur avec coloration syntaxique est vivement conseillé.

1-2_v3Fig2.eps
Fig. 1.2  Éditeur de texte classique avec coloration syntaxique

Un navigateur web récent devra également être ouvert en permanence afin de jongler entre le code saisi sur l'éditeur de texte et le résultat sur le Web.

Plusieurs versions de navigateurs de plusieurs sociétés seront toutefois nécessaires. En effet, les différents navigateurs du marché n'interprètent pas de la même façon un même code JavaScript. C'est malheureusement un handicap pour le développement d'applications web riches et dynamiques, mais parions que les principaux acteurs du marché des navigateurs suivent très prochainement les spécifications du W3C.

Note : HTML 5 permettra peut-être de réduire ces problèmes de compatibilité entre les différents navigateurs du marché. Google a fait ce pari avec Chrome ; espérons que tous les navigateurs respectent enfin les mêmes normes...

1.4.  Serveur HTTP et scripting côté serveur

Pour développer des cartes avec l'API Google Maps, il est nécessaire de posséder un serveur HTTP en service. En effet, les cartes Google Maps sont imbriquées dans des pages web et pour les déployer, un serveur de type Apache est obligatoire.

Dans le chapitre 3 consacré à l'affichage de données sur une carte Google Maps, nous verrons comment utiliser des ressources stockées en base de données. Alors, nous aurons besoin d'un langage de script côté serveur permettant la connexion à la base de données et d'un système de gestion de base de données.

Pour cet ouvrage, le choix s'est porté sur PHP comme langage de script côté serveur et MySQL comme système de gestion de bases de données.

Nous avons donc besoin d'une architecture du style WAMP ou LAMP :

Sur Windows, WampServer peut tout à fait convenir pour la phase de développement. Lors de la mise en production des pages web, le recours à un administrateur web est toutefois conseillé pour optimiser les deux serveurs Apache et MySQL.

Note : tout autre serveur de base de données (PostgreSQL par exemple) ou serveur HTTP (lighthtpd par exemple) ou langage de script (Python par exemple) peuvent être utilisés pour produire des cartes grâce à l'API Google Maps.

1.5.  Langages de programmation

Le développement avec l'API Google Maps nécessite des connaissances en HTML et en JavaScript.

1.5.1.  HTML

HTML est un format de données permettant la représentation des pages web. Les différentes balises permettent de structurer l'information, d'ajouter des images et des contenus multimédias. On utilise souvent HTML en conjonction avec des langages de programmation afin de fluidifier la navigation et de donner aux pages des qualités de réactivité et d'interaction.

1.5.2.  JavaScript

Le principal langage de programmation utilisé en conjonction avec HTML est JavaScript.

L'API Google Maps est développée en JavaScript. La tâche pour les développeurs familiers avec ce langage de script en sera bien évidemment facilitée.


Chapitre 2

Débuter avec l'API Google Maps

Objectifs

Le but de ce chapitre est de se familiariser avec l'API Google Maps ; il exposera les outils de développement à mettre en place avant de commencer un projet.

Nous reviendrons sur les langages de programmation qui seront utilisés. Suite à cette introduction, nous commencerons avec une première carte simple, puis enchaînerons sur l'élément principal de l'API : l'objet Map.

La notion d'événement sera expliquée et nous verrons l'utilisation de ces événements pour interagir avec la carte.

2.1.  Retour historique sur l'API

2.1.1.  Cinq ans déjà !

L'API Google Maps vient de fêter ces 5 ans. Désormais, dans sa troisième version, plus de 350 000 sites web l'utilisent pour afficher des cartes dynamiques.

Google Maps est d'abord connu pour son célèbre site Internet : http://maps.google.fr. Bien que n'étant pas le premier à proposer un tel service et il est devenu le plus populaire d'entre eux.

1-2_v3Fig3.eps
Fig. 2.1  Page d'accueil du site Google Maps

L'API a été proposée aux développeurs en juin 2005. Depuis lors, il s'agit de l'interface de programmation pour Internet la plus utilisée à travers le monde. En effet, la vitesse d'affichage, les nombreuses possibilités de l'API, la finesse de la cartographie et la gratuité commerciale (dans certaines mesures) ont poussé nombre de développeurs à s'intéresser à ce mode de représentation des données via une cartographie en ligne dynamique.

Définition : une API est une interface de programmation. Dans le cas de Google Maps, il s'agit d'un ensemble de fonctions et classes JavaScript qui permettent de manipuler une carte dynamiquement au sein d'un site web.

Cette manière de visualiser des informations laisse souvent libre court à l'internaute afin que celui-ci navigue au grès de ses envies à travers la carte. Le fait de pouvoir ajouter des objets ou de l'information permet aux développeurs web de guider les visiteurs sur la carte et sur le site.

La première version destinée aux seuls sites web s'est vue agrémentée au fil des années de plates-formes supplémentaires : API pour Flash, API statique (cf. annexe B), API pour les smartphones (cf. seconde partie). De plus, au fur et à mesure de l'exploitation de cette API, Google a proposé de nouveaux services : géolocalisation, calcul d'itinéraires, calcul d'altitude, etc.

De nombreux sites web proposent une carte provenant de Google Maps dans leurs pages :

Ainsi, la version 3 de l'API, officialisée en mai 2010, propose dorénavant toute une palette de services à destination des utilisateurs tout en facilitant la tâche des développeurs.

L'API Google Maps est gratuite si les points suivants sont respectés :

Google a depuis 2005 fait évoluer son concept de cartographie dynamique en l'adaptant à de nombreux autres sujets :

2.1.2.  De nombreuses fonctionnalités

Les API cartographiques dynamiques permettent de générer des cartes qui seront intégrées dans des pages web à l'aide de code JavaScript. Elles proposent donc toute une panoplie de services et d'outils à destination de l'internaute afin de l'aider dans la navigation au sein d'une carte :

2.1.3.  API version 3

La troisième version est actuellement conseillée par Google pour tout nouveau développement et mise en production. La version 2 est passée en mode « deprecated », soit déconseillé pour la production de nouveaux mashups.

Définition : un mashup permet d'ajouter sur une page web du contenu provenant d'un autre site. En l'occurrence dans notre cas, il s'agit de Google Maps.

Cette nouvelle API, à la différence de la version 2, repose sur le concept MVC (modèle-vue-contrôleur) qui a permis d'alléger considérablement la taille du code JavaScript et par conséquent d'améliorer la fluidité de la navigation.

Elle est également spécialement développée pour pouvoir être affichée sur de petits écrans, tels que ceux qui équipent les smartphones (iPhone et Android en tête). Ainsi, plus besoin de développement spécifique pour chacune des plates-formes dans le cas d'application ne nécessitant pas l'usage des capteurs spécifiques aux smartphones : GPS, accéléromètres, etc. (dans ce dernier cas, il faudra développer avec les API spécifiques à ces plates-formes : voir la deuxième partie du livre).

De nombreuses simplifications ont été également apportées à cette nouvelle mouture afin de rendre le code plus lisible. Nous verrons des exemples de code dans les chapitres suivants.

Note : avec cette version, il n'est plus nécessaire de s'enregistrer auprès de Google pour obtenir une clé d'utilisation de l'API.

2.2.  Première carte

2.2.1.  Initialisation

Le premier exemple commence toujours par un « Hello World! ». Ne dérogeons pas à cette règle et codons notre première carte.

Définissons tout d'abord le corps de la page HTML pour revenir ensuite à l'en-tête :

<body onload="initialize()">
 <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>

Revenons maintenant à la section HEAD de la page HTML ; celle-ci doit contenir les feuilles de styles ainsi que les fonctions JavaScript nécessaires au fonctionnement de la page web. Nous trouverons donc l'appel à l'API Google Maps et la fonction initialize.

<style type="text/css">
 html {
  height: 100%;
 }
 body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }
 #map_canvas {
  height: 100%;
 }
</style>
<script type="text/javascript"
  src="http://maps.google.com/maps/api/js?sensor=false" ></script>

Le paramètre sensor doit nécessairement être indiqué : il indique à l'API si l'application utilisera la position géographique de l'utilisateur ou non. Ce paramètre est notamment important pour les applications mobiles.

<script langage="text/javascript">