Rapport de stage. Représentation cartographique du contenu de l'annuaire de transport Passim

Transcription

1 Rapport de stage Représentation cartographique du contenu de l'annuaire de transport Passim Katia ZIZI Élève ingénieure en Informatique, Réseau et Multimédia Tuteur de stage Patrick Gendre Chef du service MIM (Mission Information Multimodale) Début du stage: 05/06/2013 Fin du stage: 03/06/2013

2 Remerciements Je tiens à remercier particulièrement M. GENDRE Patrick, mon tuteur de stage, qui m'a offert la possibilité d accéder à ce stage, m'a guidée et aidée à chaque fois que j'en ai eu besoin. Pour le temps et l'attention qu'il m'a accordé. Je tiens également à remercier Véronique Ventimiglia pour son accueil et sa présence tout au long du stage ainsi que l'ensemble de l'équipe pour sa bonne humeur quotidienne et sa sympathie. 2

3 Nom de l'entreprise CETE Méditerranée Activité de l'entreprise Sujet de stage Centre d Études Techniques du Ministère de l'environnement. Représentation cartographique du contenu de l'annuaire de transport Passim Adresse de l'entreprise Pôle d'activités, avenue A. Einstein, Aix-en- Provence Tuteur de stage M. GENDRE Patrick Tel, mail pat.gendre@developpementdurable.gouv.fr SOMMAIRE I Introduction...5 3

4 II Le projet Passim-Plus...6 II.1. Présentation...6 II.2. Les fonctionnalités de Passim-Plus...6 II.2.a Front-office...6 II.2.b Back-office...6 II.2.c Production d'indicateurs...7 II.2.d Exports au format CSV...7 II.2.e Exports au format KML...8 III La création de cartes interactives des offres de transport...10 III.1 Description des cartes et de leur contenu...10 III.2 Les étapes...10 III.3 Les outils...11 III.3.a La mise en forme de la page et de la carte...11 III.3.b La librairie Leaflet...11 III.3.c Modification des fichiers KML avec sed et awk...12 IV Résultats obtenus et améliorations possibles...14 V Annexe V.1 Références...15 V.2 Exemples divers I Introduction Dans le cadre du stage de découverte d'entreprise obligatoire de 4

5 troisième année à Polytech Marseille. J'ai effectué un stage d'un mois au CETE méditerranée, au service MIM (Mission Information Multimodale) du département DCEDI (Département Conception et Exploitation Durables des Infrastructures). Dans le cadre du projet Passim-Plus, un prototype visant à améliorer Passim, l'actuel annuaire des services d'information transport mis en place par le ministère du développement durable. Mon stage avait pour but la création de cartes interactives du contenu de l'annuaire Passim à partir des données présentes sur le site passim.comarquage.fr/data/. Le stage, conçu comme un processus d immersion réelle dans une fonction d ouvrier, a été l occasion pour moi d occuper un poste de stagiaire en développement web. Il m'a permis non seulement de découvrir le monde de l'entreprise mais aussi d'utiliser et d'approfondir les connaissances que j'ai acquises lors de ma formation. Tout au long de la réalisation de mon travail j'ai rencontré des problème et des difficultés que j'ai appris à gérer et à résoudre que ce soit seule, à l'aide de ressources en ligne ou en demandant de l'aide à mon tuteur de stage. Ce rapport retrace mon parcours au sein de l'entreprise durant mon stage du 5 Juin au 3 Juillet II Le projet Passim-Plus II.1. Présentation 5

6 Passim-Plus est un prototype visant à améliorer Passim, le portail annuaire des sites et des services sur la mobilité. Il recense les sources et services d'information liés aux déplacements et a été mis en place par le ministère du développement durable. II.2. Les fonctionnalités de Passim-Plus II.2.a Front-office Les fonctions principales du front-office sont pour l'internaute : rechercher un service d'information par nom, territoire, type ou mode de transport. visualiser le contenu de l'annuaire sous forme HTML. visualiser une fiche descriptive d'un service d'information. Proposer des modifications sur les fiches existantes. Cette fonction ce fera par mail. Les fonctions destinées aux réutilisateurs du contenu sont également accessibles depuis le front-office : fiche d'information (url /organismes/identifiant) liste de fiches répondant à une requête. code pour afficher cette liste. téléchargement des données comme fichiers CSV ou Excel, JSON ou XML éventuellement. II.2.b Back-office Le back-office permet : pour les administrateurs : de modifier le modèle et gérer les utilisateurs. pour les autres gestionnaires : de modifier ou créer des fiches. pour les gestionnaires visiteurs : proposer une fiche ou une correction (en envoyant un mail depuis le front office à un gestionnaire du CETE). 6

7 importer des données, pour chaque type de fiches du modèle. rechercher / exporter une partie du contenu (en CSV). II.2.c Production d'indicateurs Ces fonctionnalités, qui se basent sur la librairie passim-client, ont été développées par le CETE sous forme de scripts en python. Elles sont lancées toutes les nuits sur le serveur Passim-plus. Les scripts en python servent à produire des fichiers aux formats CSV (tableaux), SHP et KML (cartes). II.2.d Exports au format CSV CSV (Comma Separated Values) ou en français, «valeurs séparées par des virgules». Il s'agit d'un format de fichiers ouvert qui permet de stocker les données d'un tableau. Chaque ligne du fichier correspond à une ligne du tableau ; les colonnes sont en général séparées par des virgules. On peut très bien remplacer les virgules par des tabulations ou tout autre caractère. Ce format est utilisé pour échanger de manière interopérable des données de tableurs, bases de données, annuaires, etc. entre logiciels différents et/ou plate-formes différentes. Le tableur «Calc» d'openoffice ouvre les fichiers CSV ; Mozilla Thunderbird l'utilise aussi pour l'échange de carnets d'adresses. Exemple: 7

8 représente les données suivantes : Les fichiers CSV suivants sont produits : toutes les offres de transport, sous forme d'un tableau indiquant Nom, URL, Type, Couverture, Territoire, Modes, SI officiel et Notes (une offre par ligne). services d'information, une ligne par SI indiquant Nom, url, Types de Transport, Couverture, Territoire, Modes, Types d'infos, Opérateur, Site web, Site Mobile, SI officiel, nombre d'offres couvertes. SIM: tableau similaire précisant en plus quels modes gèrent la recherche d'itinéraires et le calcul des émissions de CO2. indicateurs par région: pour chaque région (une ligne par région), sont indiqués le nombre de services d'information, le nombre de sites web, le nombre d'offres, le nombre d'offres TCU, le nombre d'applications ou sites mobiles, le nombre de guichets d'info, le nombre de services open data, le nombre de SIM. de même, indicateurs par département. II.2.e Exports au format KML KML (Keyhole Markup Language) que l'on peut traduire par «langage à base de balises géolocales», est un langage basé sur le formalisme XML et destiné à la gestion de l'affichage de données géospatiales dans les logiciels Google Earth, Google Maps, Google Mobile et World Wind. Exemple : 8

9 Des cartes au format KML correspondant aux tableaux des Services d'information, des SIM, des indicateurs par Région et par Département sont produits. De plus, des cartes des offres sont générées (un fichier KML par type de transport ). Les fichiers KML peuvent s'ouvrir avec Google Earth, ou en recopiant l URL dans Google maps, ou dans un SIG. III La création de cartes interactives III.1 Description des cartes et de leur contenu 9

10 Mon rôle principal lors de ce stage était de créer quatre pages HTML contenant quatre cartes différentes : Une carte illustrant les offres de transports par type de transport et qui devait contenir un menu de boutons radio pour choisir les type de transport. Un popup s'affiche lorsque l'on clique sur un endroit de la carte. Chaque popup contient entre autres les informations suivantes concernant la région : Nom, URL, Type, Couverture, Territoire, Modes, SI officiel. Une carte des services d'information multimodale (SIM). Un popup s'affiche lorsque l'on clique sur une région. Chaque popup contient entre autres les informations suivantes concernant la région : Nom, URL, Type, Couverture, Territoire, Modes, SI officiel, si les émissions de CO2 sont indiquées ou pas. Une carte des indicateurs par région. Un popup s'affiche lorsque l'on clique sur une région. Chaque popup contient entre autres les informations suivantes concernant la région : le nombre de services d'information, le nombre de sites web, le nombre d'offres, le nombre d'offres TCU, le nombre d'applications ou sites mobiles, le nombre de guichets d'info, le nombre de services open data, le nombre de SIM. Une carte des indicateurs par département. Les popup contiennent les mêmes informations que plus haut mais elles concernent cette fois les départements au lieu des régions. III.2 Les étapes 1. Familiarisation avec la librairie javascript Leaflet à travers les tutoriels et les exemples. 2. Exploration et test des différents plugins (pour Geojson et KML). 3. Élaboration d'une première version et test sur un fichier d'exemple KML. 4. Modification de la première version et application aux différents cas. 5. Modification des fichiers KML à l'aide des langages de traitement de lignes. 10

11 III.3 Les outils La création de cartes interactives qui affichent des données KML nécessite l'utilisation de plusieurs langages. Elle s'est faite essentiellement en deux parties : III.3.a La mise en forme de la page et de la carte Les fichiers html ont servi à mettre en forme les pages qui allaient contenir les cartes et les textes associés. Ils contiennent non seulement les balises html, mais aussi les scripts JavaScript. Le JavaScript a servi à créer des cartes interactives notamment grâce à l'utilisation de la bibliothèque Leaflet, une bibliothèque cartographique en JavaScript qui permet la création de cartes interactives. III.3.b La librairie Leaflet Leaflet est une bibliothèque JavaScript open-source moderne qui permet d'afficher des cartes interactives optimisées pour les appareils mobiles. Elle a été développée par Vladimir Agafonkin avec l'aide d'une équipe de contributeurs dédiés à ce projet. Pesant à peine 30kb compressées, cette bibliothèque possède toutes les fonctionnalités que la plupart des développeurs ont toujours souhaité pour les cartes en ligne. Elle fonctionne correctement sur toutes les principales plate-formes de bureau et de mobiles, en utilisant les avantages que prodiguent les navigateurs dernière génération avec l'html5 et le CSS3. La bibliothèque peut être étendue grâce à de nombreux plugins et possède une API attractive, facile à utiliser et très bien documentée. Pour finir, le code source est simple à lire, ce qui rend les contributions simples. 11

12 L'utilisation de la bibliothèque Leaflet nécessite en plus de son téléchargement, d'inclure dans l'entête du fichier HTML les fichiers suivants : Les fichiers CSS de Leaflet. Le fichier JavaScript de Leaflet. Le plugin KML.js qui permet l'affichage de données KML sur la carte. Le script peut être divisé en deux parties : L'initialisation de la carte : Configuration de la carte, choix du support, centrage... L'ajout du (des) couche(s) KML et la mise en place des outils pour leurs manipulation. III.3.c Modification des fichiers KML avec sed et awk Après avoir visualisé les données KML sur la carte, je me suis rendu compte que l'aspect visuel nécessitait des améliorations (couleurs inappropriées, bordures trop grosses..). Avant Après De plus, le contenu des popups devait être modifié ; des URL devaient être remplacées par du texte cliquable, certains champs était de trop et les sigles devaient être remplacés par les mots qui leur correspondent. 12

13 Avant Après Pour effectuer ces modifications, modifier directement les fichiers KML n'était pas suffisant, car ceux-ci sont régénérés chaque nuit. Il fallait donc utiliser des commandes pour les modifier après chaque création. J'ai alors créé des scripts utilisant les deux langages de traitement de lignes SED et AWK. IV Les résultats obtenus et les améliorations possibles : 13

14 A l'issue de ces quatre semaines de stage, je pense avoir atteint la plupart des objectifs fixés au départ. En effet, j'ai réussi à mettre en place quatre pages web complètes, avec les cartes correspondantes. Le tout me semble pratique et agréable à utiliser (voir l'annexe pour les captures d'écran des pages). Néanmoins, certaines améliorations sont à apporter entre, autres : Une des pages, celles des offres de transport, met un temps assez important à se charger (le temps peut atteindre une minute) et ce à cause du nombre important de fichiers KML associés et qui sont assez lourds. Sur la page des offres de transport et pour certains modes de transport, certaines offres sont recouvertes par d'autres et ne sont donc pas cliquables. Les modifications à apporter sont au niveau de la division des territoires dans les fichiers KML. Quelques petites modifications au niveau de l'apparence que je n'ai pas su ou n'ai pas eu le temps nécessaire d'apporter. 14

15 IV Annexes V.1 Les réferences V.2 Exemples divers Exemple d'un fichier html : 15

16 Exemple d'un script sed : exemple d'un script awk : 16

17 Capture d'écran de la page des offres de transport : Capture d'écran de la page des SIM : 17

18 Capture d'écran de la page des indicateurs régionaux : capture d'écran de la page d'indicateurs par département : 18

19 exemple de carte utilisant OpenLayers mise en place précédemment 19

20 20