Développement d'une application de cartographie interactive sur internet.

III. Les outils mobilisés

L'application sera développée dans un environnement Linux* (Ubuntu) sur un serveur hébergé. Le choix du fournisseur d'hébergement a aussi été fait dans le cadre de la mutualisation afin d'avoir des environnements de travail cohérents en inter-parcs.

Pour ce projet et pour de nombreux projet inter-parcs, aucun serveur cartographique n'est utilisé (MapServer ou GeoServer) pour générer des fonds dynamiques. Ceci est remplacé par l'API* IGN, mise à disposition gratuitement pour les établissements publics.

Les outils mobilisés dans ce projet peuvent être classés en trois catégories : serveur, client, autres.

1. Le côté serveur

a) PostgreSQL/PostGIS

PostgreSQL est un outil de gestion de bases de données qui s'appuie sur des modèles de données relationnels. Pour gérer des objets géographiques par l'extension PostGIS. Toujours dans cette logique de mutualisation, PostgreSQL et PostGIS est l'outil de référence que les parcs nationaux utilisent depuis plus de 10 ans. Cet outil était alors déjà en place sur le projet existant.

Fig.03: base de données géographiques avec PostgreSQL et PostGIS

Figure 3: base de données géographiques avec PostgreSQL et PostGIS

b) Symfony2

C'est un Framework*PHP*développé pour créer et structurer des applications web. Symfony2 est organisé autour du modèle MVC* (Modèle Vue Contrôleur) qui permet de cloisonner les éléments tout en simplifiant l'architecture. Il a utilisé dans ce projet pour gérer une partie du côté serveur permettant de faire le lien entre la base de données et le côté client. C'est un outil qui demande une certaine maîtrise des langages de programmation orientée objet.

   

2. Le coté Client

a) AngularJS

AngularJs est un Framework* JavaScript^3(*)open source pour faire des applications web dynamiques. Il étend le HTML* pour le rendre plus dynamique et permet de développer ses propres balises et attributs HTML*. Il a été inventé par des développeurs Google dans le cadre d'un projet pour simplifier et factoriser leur ligne de codes. Le PNV utilisait la bibliothèque JavaScript ExtJS qui est devenu payante dans sa dernière version, poussant le PNV à choisir AngularJS qui utilise le même modèle d'architecture que Symfony2, le modèle MVC*. Ce choix a été fait parce qu'aujourd'hui il est très utilisé dans la communauté des développeurs web.

Fig.04: exemple d'architecture d'une application AngularJS

Figure 4: exemple d'architecture d'une application AngularJS

b) Leaflet

Leaflet est une bibliothèque open source JavaScript moderne qui a toutes les fonctionnalités pour faire des cartes interactives. Elle est très légère (environ 30 ko de codes), facile d'utilisation, bien documentée et la plus populaire aujourd'hui de ces bibliothèques. Elle permet entre autre de gérer des couches tuilées de base, d'afficher des données géo-spatiales. Elle dispose aussi des outils basiques de navigation. Le développement d'extensions par la communauté de développeur apporte de fonctionnalités supplémentaires.

Il faut rappeler qu'au début du projet, le choix s'était porté sur OpenLayer3 mais Leaflet a été choisie pour deux raisons. Comme pour AngularJS, Leaflet est aujourd'hui très utilisée dans la communauté des développeurs web. De plus, elle était déjà utilisée par le Parc national des Cévennes.

Fig.05: carte basique Leaflet avec trois formes géométriques différentes

Figure 5: carte basique Leaflet avec trois formes géométriques différentes

c) Bootstrap

Toute application web a besoin d'une bonne ergonomie. Bootstrap est un ensemble d'outils et d'extensions en Javascript pour rendre plus dynamique et ergonomique les fonctionnalités d'une application web. Il est compatible avec toutes les dernières versions des navigateurs internet. Cet outil combiné avec AngularJS devient une véritable arme en développement web. L'exemple ci-dessous montre quelques fonctionnalités proposées par l'outil: menus responsables, menus déroulants, barres de navigations, boutons...

Fig.08: exemple de quelques fonctionnalités Bootstrap

Figure 6: exemples de quelques fonctionnalités Bootstrap

Fig.06: quelques fonctionnalités de Bootstrap

Figure 7: carte basique Leaflet avec trois formes géométriques différentes

* ³Langage de programmation de script utilisé dans les pages web interactives.