Vous êtes sur la page 1sur 32

Laury Quentin

Saysanasy Jessy
UFR Sciences et Techniques
Licence professionnelle
Systèmes informatiques et logiciels spécialité conception
et développement orientés objet d'applications multi-tiers
Année 2011-2012
UFR Sciences et Techniques

Remerciements

Nous tenons à remercier Madame Sylvie DAMY qui a su nous proposer un sujet
captivant tout en nous épaulant et conseillant tout au long de ce projet.

Page 2 sur 32
UFR Sciences et Techniques

Sommaire

Introduction ................................................................................................................................ 4

Chapitre 1 – Web Mapping ........................................................................................................ 5


1. Définition du Web Mapping .............................................................................................. 5
1.1. Contexte ....................................................................................................................... 6
1.2. Fonctionnalités............................................................................................................. 6
2. Architecture d’un système de Web Mapping ..................................................................... 7
2.1. Client ........................................................................................................................... 7
2.2. Serveur cartographique ................................................................................................ 7
2.3. Serveur de données ...................................................................................................... 7
2.4. Fonctionnement ........................................................................................................... 8
3. Les outils de Web Mapping ............................................................................................... 9
3.1. OpenLayers .................................................................................................................. 9
3.2. GeoTools ................................................................................................................... 10
3.3. Leaflet ........................................................................................................................ 11
3.4. Google mapss ............................................................................................................ 12
3.5. Mappy AJAX API ..................................................................................................... 13

Chapitre 2 – Intégration de fonctions de Web Mapping dans SI_DEAP ................................ 14


1. Cahier des charges ............................................................................................................ 14
2. Outil utilisé ....................................................................................................................... 16
3. Mise en œuvre .................................................................................................................. 17
3.1. Installation de la version existante de SI_DEAP ....................................................... 17
3.2. Accès ......................................................................................................................... 17
3.3. Programmation .......................................................................................................... 18
3.4. Améliorations ............................................................................................................ 21

Conclusion ................................................................................................................................ 26

Annexe ..................................................................................................................................... 27
1.Arborescence des fichiers modifiés ............................................................................... 27
2.Table des matières ......................................................................................................... 28
3.Table des illustrations.................................................................................................... 30
4.Glossaire ........................................................................................................................ 31
5.Bibliographie ................................................................................................................. 32

Page 3 sur 32
UFR Sciences et Techniques

Introduction

Aujourd’hui de nombreux sites font appel à la géolocalisation afin de repérer de


manière plus simple et conviviale certaines de leurs données telles que :
 les coordonnées d’un site précis
 le tracé de parcours/trajets
 la position d’une personne en temps réel
 …

De ce fait, de nombreux outils et logiciels sont disponibles afin de réaliser des cartes de
données géo-référencées sur internet. Cet ensemble de services, qui au sens large, désigne tout
ce qui relève de la cartographie en ligne sur internet est ce qu’on appelle le Web Mapping.

Notre projet consiste à intégrer de nouvelles fonctionnalités de Web Mapping dans un plus
vaste projet, nommé SI_DEAP que nous verrons plus en détail par la suite, déjà existant.

Nous verrons, au fil de ce rapport, dans un premier temps ce qu’est précisément le Web
Mapping, comment se met en place un tel service et les différents outils existants pour faire
du Web Mapping. A la suite de cette étude préalable, nous verrons, dans un second temps,
comment intégrer un service de Web Mapping complet sur le site SI_DEAP qui est la partie
centrale de notre projet. Enfin, nous verrons également les différentes améliorations que nous
avons apportées au projet.

Page 4 sur 32
UFR Sciences et Techniques

Chapitre 1 – Web Mapping

Dans ce premier chapitre, nous présentons la cartographie en ligne, plus connue sous le
terme de Web Mapping. Nous définirons ce que signifie concrètement le Web Mapping, dans
quel contexte il s’utilise, ses principales fonctionnalités et nous verrons comment se met en
place un tel service. Enfin, nous étudierons également un certain nombre d’outils nécessaires
à la création d’un service de Web Mapping. Nous nous attarderons essentiellement sur des
outils libres car ce sont les seuls envisagés pour le projet SI_DEAP.

1. Définition du Web Mapping

Le terme « Web Mapping », largement utilisé sur internet, qui peut se traduire par
cartographie en ligne est une partie du domaine de compétences des Systèmes d’Informations
Géographiques (SIG). Un système d’information géographique est un système d’information
permettant d’organiser et de présenter des données spatialement référencées permettant la
production de plans et de cartes géographiques [WIKI1]. Ses usages couvrent les activités
géomatiques – ensemble des outils et méthodes permettant de représenter, d’analyser et
d’intégrer des données géographiques - de traitement et de diffusion de l’information
géographique. Le Web Mapping est un domaine de compétences, des systèmes d’informations
géographiques, permettant l’intégration et la visualisation de cartes géo-référencées sur
internet depuis un navigateur web.

Le Web Mapping permet de manipuler des cartes en ligne et de les intégrer à des sites. Pour
que ces cartes soient les plus précises possible, les informations géographiques utilisées et
manipulées par les services de cartographies en ligne sont collectées à un niveau international.
Pour une meilleure interopérabilité de ces informations, les services de Web Mapping
obéissent à différentes normes imposées par l’Open Geospatial Consortium (OGC) qui est
une organisation internationale qui développe et promeut des standards, afin de garantir
l’interopérabilité des contenus, des services et des échanges dans les domaines de la
géomatique et de l’information géographique.

Page 5 sur 32
UFR Sciences et Techniques

1.1. Contexte

La cartographie en ligne peut s’utiliser dans différents contextes. Depuis son


émergence ces dix dernières années, le Web Mapping est de plus en plus sollicité au quotidien
aussi bien dans un contexte professionnel que personnel.

Dans le contexte professionnel, la dimension spatiale est devenue fondamentale dans la


plupart des prises de décision avec l’apparition du Web Mapping :
 Gestion des infrastructures et des équipements (développement, entretien et gestion
des réseaux de collecte, de distribution, de communication…).
 Planification de l’occupation du sol : intégration et visualisation des contraintes.
 Réglementation et suivi : autorisations (d’exploiter, de prélever…) délivrées au regard
des ressources de l’environnement.

Dans le contexte personnel, le Web Mapping s’est installé durablement dans le paysage de
l’internaute :
 Recherche/visualisation d’un lieu ou d’un emplacement précis sur une carte en ligne.
 Calcul d’un itinéraire.
 Géolocalisation d’une personne ou d’un objet.

1.2. Fonctionnalités

Le Web Mapping permet l’affichage de cartes sur internet mais pas seulement. Il offre
un large panel de fonctionnalités liées à la cartographie en ligne :

 Le Web Mapping offre la possibilité de voir n’importe quelle carte du monde entier en
deux dimensions et depuis peu en trois dimensions.
 Les cartes peuvent être de différents types, plan ou satellite, en y intégrant plusieurs
vues possibles superposables comme le relief, les routes ou encore les noms de villes.
A ceci s’ajoutent des options réalisables en temps réel sur la carte comme le zoom ou
le déplacement.
 Il est possible de placer des marqueurs sur une carte, c’est-à-dire qu’il est possible
d’indiquer un emplacement précis sur une carte, à l’aide de ses coordonnées, comme
un lieu ou un bâtiment.
 Il est également possible de calculer et visualiser un itinéraire sur une carte en ligne
comme sur les sites Mappy et ViaMichelin par exemple. Ceci est une autre
fonctionnalité du Web Mapping.

Toutes ces fonctionnalités que le Web Mapping offre, sont réalisables grâce à différents outils
configurés dans une architecture de type client/serveur décrite en détail par la suite dans la
seconde partie de ce chapitre.

Page 6 sur 32
UFR Sciences et Techniques

2. Architecture d’un système de Web Mapping

L’architecture d’un système de Web Mapping est généralement de type client/serveur. Ce


système repose principalement sur les trois composantes suivantes :
 Client
 Serveur cartographique
 Serveur de données

2.1. Client

Le client est, dans le cadre du Web Mapping, sous la forme d’une application web.
C’est lui qui permet l'interrogation des serveurs cartographiques. Les clients utilisent un
certain nombre d’outils développés à base de différentes bibliothèques (Javascript, Java…),
Open Source ou non, tournés vers la cartographie.

Il existe différents clients qui permettent à l’utilisateur de visualiser des cartes géo-référencées
depuis une page web tels que Google maps, Bing Map, OpenLayers...

2.2. Serveur cartographique

Un serveur cartographique est un serveur spécifique qui permet la réalisation de cartes


géo-référencées. Il crée des images de cartes à l’aide de données spécifiques, stockées sur les
serveurs de base de données mis à leur disposition. Ces images de cartes sont envoyées aux
clients intéressés.

Il existe deux types de serveurs cartographiques :


 Les serveurs cartographiques libres où le code source est à disposition du grand
public, ce qui permet d’héberger et d’administrer son propre serveur cartographique
chez soi comme GeoServer ou MapServer.
 Les serveurs cartographiques semi-libres qui ne permettent que d’être requêtés comme
Google Map Server ou encore Bing Map Server.

2.3. Serveur de données

Les serveurs de données utilisés pour faire de la cartographie en ligne ne sont autres
que des Systèmes de Gestion de Base de Données Relationnel et Objet (SGBDRO) améliorés
qui introduisent des extensions de données spatiales – expriment toute les informations
concernant la localisation et la forme de particularités géographiques, ainsi que les rapports

Page 7 sur 32
UFR Sciences et Techniques

entre elles - en suivant les spécifications de l’Open Geospacial Consortium (OGC) afin de
permettre le stockage des données utilisées par les serveurs cartographiques.

Il existe un certain nombre de serveurs de base de données capables de stocker ce type de


données spécifiques comme, par exemple, PostGIS qui est une extension du système de base
de données PostgresSQL.

2.4. Fonctionnement

Figure 1: Architecture d'un service de Web Mapping

Pour visualiser des cartes géo-référencées depuis une page Internet, l’utilisateur se sert
d’un client sous forme d’une application web (cf. figure 1). L’utilisateur demande au client
l’image de la carte qu’il souhaite voire s’afficher. Le client envoi une requête au serveur
cartographique (1) avec toutes les options que l’utilisateur a pu demander comme le type
d’image (vectorielle ou matricielle), la taille de l’image, l’étendue de la carte souhaitée, le
zoom affecté ou encore la zone géographique à afficher.

Le serveur cartographique analyse la requête et interroge le ou les serveurs de base de


données spatiales à sa disposition (2). Le serveur cartographique reconstitue la carte
demandée avec les données récoltées (3) et retourne l’image de la carte souhaitée au client
(4).

Page 8 sur 32
UFR Sciences et Techniques

3. Les outils de Web Mapping

Dans le cadre de ce projet, nous ne nous intéresserons qu’aux clients de type


« application web », plus particulièrement à leurs bibliothèques de fonctions, car notre but est
d’intégrer une carte de données géo-référencées dans une page web HTML.

3.1. OpenLayers

OpenLayers est un logiciel libre, publié sous licence BSD. Il est constitué d’une
bibliothèque de fonctions JavaScript assurant un noyau de fonctionnalités orienté vers la mise
en place d'applications clientes Web cartographiques. Il s'intègre directement dans le code de
la page web et est compatible avec tous les navigateurs.

Principales fonctionnalités :
 Afficher sur une page web des données géographiques sous forme d'une carte.
 Placer des marqueurs sur la carte, correspondant aux différents lieux que l’on souhaite
faire apparaître.
 Intégrer des données issues de plusieurs sources.
 Ajouter des contrôles graphiques (zoom de la carte, affichage et masquage de couche,
réglage de l'opacité…).

OpenLayers accepte les données transmises par un serveur cartographique via le protocole
WMS de l’Open Geospatial Consortium.

Figure 2 : Carte OpenLayers

La figure 2 nous montre un exemple de génération de carte grâce au logiciel OpenLayers ainsi
que ses différents contrôles graphiques et marqueurs, l’utilisateur peut donc naviguer sur la
carte à l’aide de ces contrôles afin d’avoir plus de détails sur des lieux précis.

Page 9 sur 32
UFR Sciences et Techniques

3.2. GeoTools

GeoTools est une librairie Java Open Source qui regroupe une quantité d'autres
librairies, ce qui explique sa taille plutôt importante pour une librairie (20Mo). Elle se base
sur les normes en vigueur dans le domaine des systèmes d'informations géographiques (SIG).
Utiliser cette librairie signifie travailler avec le langage Java ce qui est plus compliqué à
mettre en œuvre du fait que l’affichage de la carte doit se faire dans une page web.

Principales fonctionnalités :
 Définir une interface spatiale (carte) à l’aide de données géographiques.
 Plugins additionnels : permettant de définir de nouveaux formats à la bibliothèque de
base.
 Possibilité d’avoir différentes couches (vue carte, vue photo ou vue cadastre).
 Zoom amélioré par critère :
o Monde
o Pays
o Département
o Ville
o Rue
o Maison

Figure 3 : Carte GéoTools

Sur cette photo on voit que la carte offre différents types de vues. De plus, le zoom ne se fait
pas de façon aléatoire, il prend en compte l’emplacement où l’on se trouve et zoom
dégressivement en fonction du lieu.

Page 10 sur 32
UFR Sciences et Techniques

3.3. Leaflet

Leaflet est une librairie Javascript permettant de créer des cartes interactives basées
sur OpenStreetMap (OpenStreetMap est un projet international fondé en 2004 dans le but de
créer une carte libre du monde [OSM]). Cette librairie permet d'intégrer une carte interactive
utilisant la cartographie participative et open source OpenStreetMap.
Leaflet a été conçu pour des clients de type léger (mobiles). Ce logiciel nécessite donc de la
simplicité et de la légèreté.

Principales fonctionnalités :
 Possibilité de zoomer sur la carte.
 Ajouter des marqueurs.
 Zones et formes avec légendes sous forme de pop-up.

Figure 4 : Carte Leaflet version ordinateur

Figure 5 : Carte Leaflet version mobile

Les figures 4 et 5 nous montrent que l’on retrouve les fonctionnalités de base indispensables à
la navigation telles que le zoom, le déplacement et les différentes vues, adaptables sur
téléphone nouvelle génération.

Page 11 sur 32
UFR Sciences et Techniques

3.4. Google mapss

L'API Google maps permet d'intégrer des cartes semblables à celles du célèbre portail
Google maps dans des pages web, directement dans le code de la page HTML. L'API Google
maps fournit une interface intuitive et très réactive construite en utilisant les technologies
AJAX.

Principales fonctionnalités :
 Contrôle des types de vue (plan/satellite/relief).
 Carte de navigation globale.
 Echelle.
 Boutons de zoom et de navigation.
 Possibilité de zoomer grâce à la molette de la souris.
 Création des marqueurs avec info-bulle via une base de données.

Cet outil de Web Mapping ne nécessite aucune bibliothèque afin d’utiliser les différentes
fonctions Javascript nécessaires à la réalisation d'une carte. La bibliothèque Google Maps
s'inclue directement dans le code Javascript de la page internet via une URL. Cette URL
permet d'accéder à l'ensemble des fonctionnalités de l'API via le net.

Figure 6 : Carte Google maps

La création d'une simple carte et l'intégration de celle-ci dans une page Internet est très facile.
La carte basique, proposée dans la figure 6, intègre nativement le déplacement grâce à la
souris, le zoom et dézoom au double-clic.

Google maps est un outil gratuit dans la limite du raisonnable. Google demande une
participation financière (environ 10000 euros par an) si l’on effectue plus de 25000 requêtes
journalières sur la carte que l’on intègre à son site. Mais atteindre un tel nombre de requêtes
journalières n’est pas à la portée de tous les sites.

Page 12 sur 32
UFR Sciences et Techniques

3.5. Mappy AJAX API

Mappy AJAX API est un outil d’aide au déplacement, il fournit des services aux
utilisateurs afin qu’ils puissent de la façon la plus simple et précise possible, se repérer.

Principales fonctionnalités :
 Affichage de plan.
 Codage précis des adresses.
 Permet le calcul d’itinéraire.
 Affichage de photos de façade de batiments Visiocity (en France et en Espagne).

Mappy AJAX API utilise les technologies AJAX, ce qui permet d’intégrer du code JavaScript
directement dans les pages web HTML. Le fait d’utiliser ce langage facilite le développement
des applications de Web Mapping car aucune bibliothèque n’est à télécharger. Du fait que
Mappy AJAX API soit aussi simple d’utilisation, on peut aussi le retrouver sur de nombreux
mobiles (plateforme IOS, Android ou JavaME).

Figure 7 : Carte Mappy

Cette image montre bien que cet outil est une aide aux déplacements, car la carte ainsi que les
infos-bulle fournissent de nombreuses informations comme les emplacements d’hôpitaux ou
de parking.

Page 13 sur 32
UFR Sciences et Techniques

Chapitre 2 – Intégration de fonctions de Web Mapping dans


SI_DEAP

SI_DEAP (Système d’Information sur les Données Environnementales Actuelles et


Passées) est un site web dynamique en cours de réalisation appartenant au Chrono-
Environnement. Le but de ce site web est de regrouper les informations produites par les
spécialistes du laboratoire Chrono-Environnement (UMR 6249) pour ensuite les répertorier
selon différents domaines de recherche. Ces domaines variés, comportent de nombreuses
disciplines telles que : archéologie, archéozoologie, sédimentologie, palynogie... permettant
d’étudier l’ensemble des conditions environnementales et de reconstituer l’histoire de
l’humanité. SI_DEAP a donc une fonction de pôle central d’informations. Chaque
information déposée sur le site peut être échangée entre les différents spécialistes, ce qui
favorise l’avancement des recherches.

Notre travail consiste à améliorer certaines des fonctionnalités de l’application


SI_DEAP. Nous présentons dans ce second chapitre ce qui nous a concrètement été demandé
de réaliser et comment nous avons mené à bien ce projet.

1. Cahier des charges

1.1. Réalisations principales

La base de ce projet consiste à intégrer une carte à l’application web SI_DEAP. Cette
carte a pour fonction de répertorier de la manière la plus claire et la plus précise possible tous
les sites enregistrés dans SI_DEAP. Ces sites doivent être indiqués sur la carte à l’aide de
marqueurs, et chacun de ces marqueurs, doit proposer à l’utilisateur le nom du site en
question ainsi qu’un lien permettant d’afficher les informations supplémentaires
correspondant à ce site. Ces informations peuvent apparaître dans une info-bulle par exemple.

La carte doit pouvoir interagir avec la base de données SI_DEAP afin de récupérer toutes les
informations nécessaires concernant les sites de recherches pour ensuite les réutiliser. Les
informations les plus importantes sont :
 Le nom du site.
 Les coordonnées du site.

Les autres informations concernant un site ne sont pas directement utilisées sur la carte, on les
retrouve dans le lien permettant d’afficher les informations supplémentaires. De plus, il faut
intégrer une fonction zoom à la carte. Le but étant de faciliter le visionnage de la carte car si
de nombreux sites de recherches se trouvent proche l’un de l’autre, le fait de zoomer aidera

Page 14 sur 32
UFR Sciences et Techniques

l’utilisateur à voir plus en détail l’emplacement exact des différents sites. Pour finir, il serait
intéressant que la carte pointe par défaut sur Besançon.

La création de la carte doit se faire à l’aide d’un outil de Web Mapping. Il est demandé de
faire une étude préalable des différents outils de Web Mapping existants et réunissant
certaines conditions :
 L’outil doit être facile à prendre en main et simple d’utilisation.
 Il doit être capable de se connecter à une base de données et intégrer les informations
recueillies, sur la carte.
 Il ne doit pas nécessiter de nombreuses ressources systèmes pour fonctionner.
 Enfin, l’outil doit être de préférence gratuit.

1.2. Réalisations secondaires

Une fois le travail d’intégration de la carte à l’application SI_DEAP réalisé et


répondant aux critères présentés ci-dessus, il nous est demandé d’apporter un certain nombre
d’améliorations afin d’optimiser l’utilisation et la configuration de la carte via l’application.

La première amélioration est au niveau de la configuration par défaut de la carte. Il faut


pouvoir configurer la taille du zoom par défaut, ainsi que les coordonnées du centre de la carte
lors de son affichage. Pour cela, les trois attributs :
 taille du zoom par défaut,
 latitude par défaut du centre de la carte à afficher,
 longitude par défaut du centre de la carte à afficher,
sont ajoutés dans la table « CONFIGURATION » de la base de données, et le programme de
gestion de la configuration de SI_DEAP « configuration.php » doit être modifié.

Une vérification automatique sur ces attributs avant enregistrement dans la base de données
serait intéressante pour éviter au maximum les erreurs.

La seconde amélioration importante à effectuer se situe au niveau de la page qui intègre la


carte. Cette page doit être paramétrable, c’est-à-dire qu’en fonction d’où elle sera appelée, les
informations que la carte contient seront différentes, en particulier les informations contenues
dans les info-bulles de la carte.

Enfin il serait intéressant de proposer aux utilisateurs de l’application une option


d’impression de la carte.

Page 15 sur 32
UFR Sciences et Techniques

2. Outil utilisé

Après avoir défini tout ce que l’outil de Web Mapping doit pouvoir réaliser dans le
cadre du projet, nous avons dressé une liste des outils de Web Mapping les plus utilisés en
prenant en compte leurs caractéristiques et leurs possibilités. Un outil à particulièrement
retenu notre attention, il s’agit de Google maps.

Google maps est un outil gratuit dans le cadre de notre utilisation, ce qui était une des
principales contraintes. Ensuite, il ne nécessite aucune importation de bibliothèques de
fonctions qui pourraient alourdir l’application SI_DEAP, les bibliothèques Google maps sont
directement appelées lors de l’utilisation de l’outil.

Pour ce qui est du langage de programmation utilisé, Google maps s’intègre parfaitement dans
des pages web HTML ou PHP à l’aide de fonctions Javascript complètes. Ce qui est en accord
avec les langages utilisés précédemment dans le projet.

Concernant l’affichage d’informations sur la carte, Google maps gère parfaitement


l’intégration d’informations issues de bases de données comme c’est le cas pour le projet.

Google maps propose de nombreux outils de navigations et de personnalisation de cartes. Il


offre une liberté de zoom importante à l’utilisateur, plusieurs types de vues sont aussi
disponibles telles que la vue satellite ou la vue en relief. De plus, Google améliore
régulièrement son API Google maps ce qui offre encore un plus grand nombre de possibilités
à venir.

En résumé, Google maps est l’outil de Web Mapping regroupant tous les critères
permettant de réaliser ce projet. C’est pourquoi, après concertation avec notre responsable de
projet, nous avons choisi Google maps pour réaliser le projet qui nous a été confié.

Page 16 sur 32
UFR Sciences et Techniques

3. Mise en œuvre

3.1. Installation de la version existante de SI_DEAP

L’application SI_DEAP n’étant pas encore en ligne, tout le travail qui nous a été
demandé a été réalisé en local sur nos machines. Avant de nous attaquer au codage de notre
partie du site, nous commençons par installer une plate-forme de développement web WAMP
sur nos machines respectives. C’est un ensemble de logiciels libres permettant de construire
des serveurs de sites web. Cette installation, dans notre cas, est basée sur un système
d’exploitation Windows et comprend un serveur web Apache, un serveur de bases de données
MySQL et le langage PHP permettant de générer des pages web dynamiques. Nous utilisons
WampServer qui est une plate-forme robuste et configurable à souhait.

Il faut installer ce type de plate-forme pour héberger l’ensemble de l’application SI_DEAP. A


cela, nous devons également installer en complément le module PEAR (PHP Extension and
Application Repository) qui est une collection de bibliothèques PHP permettant le
fonctionnement correct de l’application SI_DEAP. Après cette installation, nous créons la
base de données à l’aide d’un dump de la base de données SI_DEAP déjà existante.

3.2. Accès

C’est à partir de ce moment que le travail de réalisation commence réellement. Le but


étant de proposer une carte répertoriant les sites affichés sur la page Site de la partie
Administration du site, nous commençons par ajouter sur la page site_affiche
(SiDEAP\Pages\Disciplines\Administration\site_affiche) un lien de redirection vers la
nouvelle page, qui va accueillir la carte Google maps, que nous allons créer.

Figure 8: Page site_affiche

Page 17 sur 32
UFR Sciences et Techniques

Maintenant nous créons cette nouvelle page qui va accueillir la carte, nous l’appelons
« page_map.php » (SiDEAP\Pages\Disciplines\Administration\page_map.php).

Figure 9: Arborescence

Pour accéder à cette nouvelle page depuis le site, il ne faut pas oublier de respecter le
protocole d’ajout de nouvelles pages dans l’application SI_DEAP. Pour cela il faut enregistrer
la nouvelle page dans la base de données (table PAGE) et lui affecter les bons droits.

3.3. Programmation

La nouvelle page « page_map.php », qui contient la carte Google maps, intègre


différents langages de programmation. Une première partie est codée en HTML et contient la
fonction Javascript qui permet de générer dynamiquement la carte Google maps, et une
seconde partie codé en PHP, contient les éléments de connexion à la base de données afin
d’afficher les sites sur la carte à l’aide de leurs coordonnées géographiques (longitude et
latitude).

3.3.1. Fonction Javascript

La carte Google maps est générée avec la fonction Javascript initialize(). Cette fonction
définit toutes les options de paramétrage nécessaires à l’affichage de la carte :
 zoom : Définit le zoom natif affecté à la carte (valeur : 1,2,3…).
 center : Définit l’emplacement du centre de la carte (valeurs : coordonnées de
longitude et de latitude).
 scaleControl : Définit ou non l’affichage de l’échelle sur la carte (valeur : true, false).
 mapTypeId : Définit la texture de la carte (valeur : SATELLITE, ROADMAP,
HYBRID ou TERRAIN).

Afin de pouvoir utiliser les bibliothèques de fonctions Javascript de l’API Google maps, on
doit utiliser un script de configuration de type Javascript.

Page 18 sur 32
UFR Sciences et Techniques

Une connexion internet est nécessaire pour afficher la carte Google maps du fait que les
informations nécessaires à l’élaboration de cette carte proviennent des serveurs
cartographiques de Google.

3.3.2. Requêtes PHP

Une connexion à la base de données est nécessaire pour recueillir les coordonnées des
sites à afficher sur la carte. Deux tables sont utilisées pour cette opération, la table SITE qui
contient le nom des sites à afficher et la table COORDONNEES qui contient les coordonnées
géographiques de ces sites. Pour ce faire, on utilise la requête SQL suivante :

Une foi les coordonnées géographiques des sites récupérées, on les affiche sur la carte sous
forme de marqueurs. Ces marqueurs sont invoqués à l’aide de la méthode
google.maps.Marker() de l’API Google maps.

Figure 10: Fonction google.maps.Marker()

Ensuite, on crée l’info-bulle qui affiche les informations du site choisi. Ces info-bulles sont
invoquées à l’aide la méthode google.maps.InfoWindow().

Figure 11: Fonction google.maps.InfoWindow()

Enfin, on affecte l’info-bulle que nous venons de créer au marqueur souhaité avec la fonction
google.maps.event.addListener().

Figure 12: Fonction google.maps.event.addListener()

Page 19 sur 32
UFR Sciences et Techniques

3.3.3. Modification du CSS

Avec l’intégration de la carte sur le site, des conflits surviennent entre la carte et le
menu horizontal de la page. En effet, la carte chevauche les menus déroulants. Pour remédier
à cet incident mineur, il faut légèrement modifier le CSS du site (SiDEAP\Styles\menus.css) :

Figure 13: menus.css

On ajoute un z-index de valeur « 2 » au menu horizontal comme sur l’image et un z-index de


valeur « 1 » à la carte directement via le code de la page « page_map ». Cela permet de
d’affecter le menu horizontal à un plan supérieur à celui de la carte.

3.3.4. Rendu

Figure 14: page_map

Voici le rendu final de la page « page_map.php » qui intègre la carte Google maps.
Les points rouges sur la carte représentent les marqueurs mis aux emplacements des sites
enregistrés dans la base de données. Si l’on clique sur un marqueur, une info-bulle apparait
comme sur l’image ci-dessus et nous permet d’accéder au détail du site.

Page 20 sur 32
UFR Sciences et Techniques

3.4. Améliorations

3.4.1. Configuration de la carte

3.4.1.1. Modification de la base de données

Avant de modifier le formulaire de la page « configuration.php », on commence par


modifier la table correspondant à ce formulaire dans la base de données SI_DEAP.

Figure 15: Table CONFIGURATION

On ajoute trois attributs à la structure de la table « CONFIGURATION » comme sur l’image


ci-dessus.

3.4.1.2. Modification de la page configuration

Il faut maintenant modifier la page de configuration de l’application SI_DEAP


(SiDEAP\Pages\Disciplines\Administration\configuration.php). On commence par ajouter
trois variables (voir figure ci-dessous) qui vont récupérer les valeurs des nouveaux champs
créés dans la base de données à l’aide de la requête SQL déjà existante dans le code de la
page.

Figure 16: Variables de la page configuration.php

Ensuite, on ajoute les trois nouveaux champs au formulaire de la page, correspondant aux
variables créées qui sont le zoom et les coordonnées géographiques du centre de la carte.
Après modification, voici le rendu final de la page de configuration :

Page 21 sur 32
UFR Sciences et Techniques

Figure 17: Page configuration

3.4.1.3. Vérification de champs

Cette vérification de champs a pour but de contrôler, dans la limite du possible, ce que
l’utilisateur insère dans les champs du formulaire de configuration. Cette vérification permet
d’éviter un certain nombre d’erreurs qui pourrait être enregistrées dans la base de données et
provoquer des problèmes d’affichage de la carte. Pour exemple, la valeur du zoom doit être
positive.

Pour ce faire, nous avons ajouté à la page « configuration.php » des conditions sous la
forme d’expressions régulières au niveau de la validation des champs du formulaire de la
page.

3.4.1.4. Modification de la page index

Afin d’éviter que les champs du formulaire de la page de configuration soient vides
lors d’un réaffichage de la page après erreur de saisie d’un ou plusieurs champs, des
ajouts/modifications sont à effectuer dans la page « index.php » (SiDEAP\index.php).

Page 22 sur 32
UFR Sciences et Techniques

Figure 18: Page index.php

Comme on peut le constater sur l’image ci-dessus, on ajoute les trois variables nécessaires au
formulaire. Si la table « CONFIGURATION » de la base de données n’est pas vide, les
variables récupèrent les valeurs de la table sinon des valeurs par défaut sont affichées.

3.4.2. Paramétrage de la page

Nous avons apporté une amélioration dans le codage de la page qui contient la carte
(page_map.php) afin de permettre le paramétrage de cette carte. Par la suite, avec l’évolution
de l’application SI_DEAP, il sera possible de consulter la carte en y accédant depuis
différentes pages du site. Et selon la page depuis laquelle on accède à la carte, les
informations contenues sur celle-ci seront différentes. Aussi bien les sites répertoriés sur la
carte que les info-bulles correspondantes.

Ceci est possible grâce aux paramètres passés dans l’URL de la page au moment de son accès.
Deux paramètres sont nécessaires. Le premier se nomme « varbase », il opère sur la requète
SQL qui affiche les sites sur la carte. Le second paramètre se nomme « varmap » et en
fonction de sa valeur, les informations contenues dans les info-bulles de la carte son
différentes. Ces informations sont modifiées/ajoutées depuis le switch du code de la page
« page_map.php ».

Page 23 sur 32
UFR Sciences et Techniques

Figure 19: Paramétrage info-bulles

L’image 1 de la figure est obtenue via l’accès à la carte depuis la page « site », l’info-bulle
nous propose le détail du site choisi. En revanche l’image 2 qui est obtenue via l’accès à la
carte depuis une autre page propose d’autres informations dans l’info-bulle or c’est bien la
même page qui est appelée (page_map) dans les deux cas mais avec un paramètre dans l’URL
différent.

3.4.3. Option d’impression

Enfin, nous avons ajouté la possibilité à l’utilisateur de pouvoir imprimer la carte affichée
à l’écran via l’icône d’impression sous la carte comme sur l’image ci-dessous.

Icône d'impression

Figure 20: Chemin d’impression de la carte

Pour ce faire, nous utilisons une fonction Javascript, nous l’avons appelé printMap(). Vu qu’il
est nécessaire que la carte propose le déplacement et le zoom, l’image de cette carte est dite
dynamique, hors l’impression d’une telle image est impossible, seules les images statiques
sont imprimables. Notre fonction printMap() crée donc une image statique à partir des
informations recueillies depuis l’image dynamique de la carte affichée à l’écran. C’est cette
dernière image créée qui est proposée à l’impression.

Lors de la création de l’image statique, il faut bien prendre en compte les modifications que
l’utilisateur à pu opérer sur la carte avant de la proposer à l’impression comme le
déplacement, la modification du zoom ou la texture de la carte. C’est pourquoi ces paramètres
de l’image statique ne sont pas définis à l’avance. Nous utilisons des fonctions existantes de
l’API Google maps qui permettent de récupérer ces paramètres en temps réel :

Page 24 sur 32
UFR Sciences et Techniques

 getMapTypeId() permet de récupérer la texture actuelle de la carte.

 getCenter() permet de récupérer les coordonnées actuelles du centre de la carte.


 getZoom() permet de récupérer le zoom actuel de la carte.

Enfin, une fois l’image de la carte créée, elle est redirigée sur une nouvelle fenêtre du
navigateur qui propose à l’utilisateur son impression, voir image ci-dessous.

Figure 21: Impression de la carte

Nous avons rencontré quelques difficultés lors de cette partie car les coordonnées des
marqueurs étant générés via requêtes SQL, il était impossible de les intégrer dans l’image
statique qui est créé a partir d’un lien URL. Nous avons du passer par l’intermédiaire d’une
variable PHP, qui récupère toutes les coordonnées des marqueurs enregistrés dans la base de
données, et l’insérer dans l’URL lors de la création de l’image statique.

Page 25 sur 32
UFR Sciences et Techniques

Conclusion

Ce projet nous a permis de découvrir la cartographie en ligne, ou Web mapping, et


plus largement les systèmes d’informations géographiques (SIG). C’est un domaine
relativement vaste que nous n’avions jamais eu l’occasion d’étudier auparavant. Nous avons
pu apprendre le fonctionnement des SIG et comment mettre en place une application de Web
Mapping dans son intégralité.

Notre projet consistant à intégrer de nouvelles fonctionnalités dans un plus vaste projet déjà
existant, nous avons due analyser et comprendre le fonctionnement de l’application
SI_DEAP, relativement complexe, dans son intégralité afin de respecter les règles de
développements déjà appliquées et de nous adapter aux contraintes existantes.

Afin de déterminer l’application de Web Mapping à utiliser pour le projet, nous avons fait une
étude préalable des différents outils existants, en les comparants un à un. A la suite de cette
étude, nous avons choisi d’utiliser l’interface de programmation Google maps. C’est un outil
complet et performant qui permet de réaliser un très grand nombre d’opérations sur les cartes.
Nous avons pu mener à bien toutes les taches qui nous avaient été confiées, à l’aide de Google
maps qui se prend relativement vite en main et s’intègre parfaitement à une application web.

Tout au long du projet, nous avons du côtoyer différents langages de programmation tels que
HTML, PHP, Javascript... Cela nous a permis d’enrichir et consolider nos connaissances en
programmation orientée web.

Le projet se faisant en binôme et en parallèle avec les cours, l’organisation de travail fut
quelque peu difficile, nous avons également rencontré quelques difficultés avec certaines
fonctions Javascript de l’API Google maps comme pour l’impression de la carte mais tout a
été résolut et réalisé avec succès.

Page 26 sur 32
UFR Sciences et Techniques

Annexe

1. Arborescence des fichiers modifiés

Page 27 sur 32
UFR Sciences et Techniques

2. Table des matières

Introduction ................................................................................................................................ 4

Chapitre 1 – Web Mapping ........................................................................................................ 5

1. Définition du Web Mapping .............................................................................................. 5


1.1. Contexte ....................................................................................................................... 6
1.2. Fonctionnalités............................................................................................................. 6
2. Architecture d’un système de Web Mapping ..................................................................... 7
2.1. Client ........................................................................................................................... 7
2.2. Serveur cartographique ................................................................................................ 7
2.3. Serveur de données ...................................................................................................... 7
2.4. Fonctionnement ........................................................................................................... 8
3. Les outils de Web Mapping ............................................................................................... 9
3.1. OpenLayers .................................................................................................................. 9
3.2. GeoTools ................................................................................................................... 10
3.3. Leaflet ........................................................................................................................ 11
3.4. Google mapss ............................................................................................................ 12
3.5. Mappy AJAX API ..................................................................................................... 13

Chapitre 2 – Intégration de fonctions de Web Mapping dans SI_DEAP ................................ 14

1. Cahier des charges ............................................................................................................ 14


1.1. Réalisations principales ............................................................................................. 14
1.2. Réalisations secondaires ............................................................................................ 15
2. Outil utilisé ....................................................................................................................... 16
3. Mise en œuvre .................................................................................................................. 17
3.1. Installation de la version existante de SI_DEAP ....................................................... 17
3.2. Accès ......................................................................................................................... 17
3.3. Programmation .......................................................................................................... 18
3.3.1. Fonction Javascript ............................................................................................. 18
3.3.2. Requêtes PHP ..................................................................................................... 19
3.3.3. Modification du CSS .......................................................................................... 20
3.3.4. Rendu ................................................................................................................. 20
3.4. Améliorations ............................................................................................................ 21

Page 28 sur 32
UFR Sciences et Techniques

3.4.1. Configuration de la carte .................................................................................... 21


3.4.1.1. Modification de la base de données ............................................................ 21
3.4.1.2. Modification de la page configuration ........................................................ 21
3.4.1.3. Vérification de champs ............................................................................... 22
3.4.1.4. Modification de la page index ..................................................................... 22
3.4.2. Paramétrage de la page ....................................................................................... 23
3.4.3. Option d’impression ........................................................................................... 24

Conclusion ............................................................................................................................ 26

Annexe ..................................................................................................................................... 27
1. Arborescence des fichiers modifiés.................................................................................. 27
2. Table des matières ............................................................................................................ 28
3. Table des illustrations....................................................................................................... 30
4. Glossaire ........................................................................................................................... 31
5. Bibliographie .................................................................................................................... 32

Page 29 sur 32
UFR Sciences et Techniques

3. Table des illustrations

Figure 1: Architecture d'un service de Web Mapping................................................................ 8


Figure 2 : Carte OpenLayers ...................................................................................................... 9
Figure 3 : Carte GéoTools ........................................................................................................ 10
Figure 4 : Carte Leaflet version ordinateur .............................................................................. 11
Figure 5 : Carte Leaflet version mobile ................................................................................... 11
Figure 6 : Carte Google maps .................................................................................................. 12
Figure 7 : Carte Mappy ............................................................................................................ 13
Figure 8: Page site_affiche ....................................................................................................... 17
Figure 9: Arborescence ............................................................................................................ 18
Figure 10: Fonction google.maps.Marker() ............................................................................. 19
Figure 11: Fonction google.maps.InfoWindow() ..................................................................... 19
Figure 12: Fonction google.maps.event.addListener()............................................................. 19
Figure 13: menus.css ................................................................................................................ 20
Figure 14: page_map ................................................................................................................ 20
Figure 15: Table CONFIGURATION ..................................................................................... 21
Figure 16: Variables de la page configuration.php .................................................................. 21
Figure 17: Page configuration .................................................................................................. 22
Figure 18: Page index.php ........................................................................................................ 23
Figure 19: Paramétrage info-bulles .......................................................................................... 24
Figure 20: Chemin d’impression de la carte ............................................................................ 24
Figure 21: Impression de la carte ............................................................................................. 25

Page 30 sur 32
UFR Sciences et Techniques

4. Glossaire

AJAX : Asynchronous Javascript and XML est une manière de construire des applications
Web et des sites web dynamiques basés sur diverses technologies Web ajoutées aux
navigateurs.

API : Application Programming Interface ou Interface de Programmation est un ensemble


de fonctions, procédures ou classes mises à disposition par une bibliothèque logicielle, un
système d'exploitation ou un service. Elle permet l'interaction des programmes les uns avec
les autres.

BSD : Berkeley Software Distribution Licence est une licence libre utilisé pour la
distribution de logiciels. Elle permet de réutiliser tout ou une partie du logiciel sans
restriction, qu’il soit intégré dans un logiciel libre ou propriétaire.

GPL : General Public licence est une licence qui fixe les conditions légales de distribution
des logiciels libres du projet GNU.

OGC : L'Open Geospatial Consortium est une organisation internationale à but non lucratif
fondée en 1994 pour répondre aux problèmes d'interopérabilité des systèmes d'information
géographique (SIG).

OpenSource : La désignation open source s'applique aux logiciels dont la licence respecte
certains critères comme la possibilité de libre redistribution, d'accès au code source et aux
travaux dérivés.

OpenStreetMap : C’est un projet international fondé en 2004 dans le but de créer une carte
libre du monde.

SIG : Un Système d'Information Géographique est un système d'information permettant


d'organiser et de présenter des données alphanumériques spatialement référencées, ainsi que
de produire des plans et des cartes. Ses usages couvrent les activités géomatiques de
traitement et diffusion de l'information géographique.

WMS : Le Web Map Service est une norme définie par l'OGC permettant au moyen d'une
URL formatée d'interroger un serveur cartographique afin d'afficher une carte/image.

Page 31 sur 32
UFR Sciences et Techniques

5. Bibliographie

 Web Mapping :
 http://geotribu.net/
 http://fr.wikipedia.org/wiki/Web_Map_Service
 http://fr.wikipedia.org/wiki/Open_Geospatial_Consortium
 http://www.allili.net/sig/introduction-a-la-cartographie
 http://cloudmapping.posterous.com/
 [WIKI1] http://fr.wikipedia.org/wiki/Système_d'information_géographique

 OpenLayers :
 http://openlayers.org/
 http://geotribu.net/node/21

 Google maps :
 http://code.google.com/intl/fr/apis/maps/index.html
 http://geotribu.net/node/204
 http://geotribu.net/node/23
 http://blog.thecodingmachine.com/fr/content/google-maps-api

 GeoTools :
 http://geotools.org/

 Leaflet :
 http://leaflet.cloudmade.com/
 [OSM] http://openstreetmap.fr/
 http://www.lafermeduweb.net/billet/leaflet-une-librairie-js-pour-creer-des-maps-
interactives-1111.html

 Mappy AJAX API:


 http://connect.mappy.com/fr/api/overview

Page 32 sur 32