Tutorial

Retour d'expérience sur l'adaptation du mviewer en applications métiers

Contexte

Notre collectivité a décidé de mettre en ligne une déclinaison du mviewer du géoBretagne. Nous avons pris le parti de capitaliser la réalisation de notre partenaire, toutefois un besoin de spécialisation est vite apparu. Je décrirai ici les différentes étapes qui nous ont permis d'arriver à nos fins.

Toutefois, ce qui est décrit ici n'est peut-être plus tout à fait vrai dans la mesure où nous souhaitons faire intégrer nos spécificités dans la version standard du produit.

En espérant que ce texte pourra servir à toute personne ou orgnisme qui aurait une démarche similaire.

Téléchargements - Prérequis

Tout le matériel de ce tutorial est disponible sur github
Faites l'extraction via la commande "git clone https://github.com/loragglo/mviewer".

Vous devez disposer d'un serveur WEB, avec un moteur PHP si vous souhaitez mettre en oeuvre notre fichier pour la mise en oeuvre d'un proxy. Pas besoin de base de données.La suite de mon tuto suppose que vous êtes sous apache, mais cela peut s'adapter à tout autre contexte avec très peu de modification.
Vous devez éventuellement connaître le paramétrage de votre proxy sortant pour permettre à votre application de se connecter à d'autres serveurs.
Vous devez disposer d'un nom de domaine.
Pour que la localisation sur adresse fonctionne, vous devez disposer d'une clé IGN vous permettant de vous connecter à leur service OLS.
Et : NON ... ma clé ne fonctionnera pas avec votre nom de domaine ...
Quelques notions sur les technos WEB sont nécessaires : feuilles de style, javascript, php (un tout petit peu).

Enfin dans l'idéal vous disposez d'une IDS complete pour diffuser vos données cartographiques.
Si ce n'est pas le cas, pointez vers celles des autres dans vos fichiers de configuration !

Étape 1 : Mise en route

Téléchargez mon archive et décompressez-là à la racine de votre serveur WEB.

Lancez un navigateur à l'adresse http://VOTRE_DOMAINE/mviewer.
Vous devez voir s'afficher ... la version classique du mviewer !
Comme ceci

Il y a sûrement des choses qui ne marchent pas !
La localisation sur adresse par exemple...
Et l'interrogation des couches thématiques ...
Et l'accès aux métadonnées de ces couches non plus !

Normal : à ce stade on n'a encore rien fait. Juste rajouté une balise "meta" pour forcer IE à se mettre dans le mode de compatibilite maximum qu'il connait.

Étape 2 : tout faire marcher.

Placez-vous dans le dossier proxy.

Editez le fichier simple.php
Ce fichier permet à l'application de se connecter à des sites distants.
Un peu d'intelligence a été rajoutée : si d'aventure l'application s'appelle elle-même on passe à travers un accès fichier.
Remplacez les informations de proxy par celles de votre infrastructure : Vous pouvez bien entendu remplacer mon proxy très basique par quelque chose de plus élaboré.

Placez-vous dans le dossier mviewer/config
Faites une copie du fichier default.xml.
Chez moi, sous unix :
cp mviewer/config/default.xml mviewer/config/etape2.xml
Editez cette copie.
Pour faire fonctionner localisation sur adresse, remplacez l'expression VOTRE_CLE_IGN par la clé que vous avez récupéré en vous inscrivant sur le site de l'IGN.
Changez l'url de la balise proxy si vous disposez d'un autre script que le mien.
Pour prendre en compte votre fichier, la premiere méthode consiste à modifier le fichier mviewer/index.hml en conséquence.
Mais la méthode la plus souple consiste à rajouter un paramètre config dans votre URL.
Comme ceci : index.html?config=config/etape2.xml
C'est toujours la version classique du mviewer, mais toutes les fonctionnalités doivent marcher.

Étape 3 : personnalisez vos couches de données.

Cela se fait toutjours à partir du fichier de configuration xml.
Faites une copie de ce fichier.
Chez moi, sous unix :
cp mviewer/config/etape2.xml mviewer/config/etape3.xml
Editez votre copie.
Dans la section baselayers enlevez ou rajoutez des entrées baselayer.
Dans la section themes enlevez ou rajoutez des entrées theme.
Dans chaque section theme enlevez ou rajoutez des entrées layer.
Pour remplir ces lignes inspirez vous des autres balises déjà présentes.
Vous devez savoir ce que sont des flux OGC : WMS, WMTS, WFS, ...

Rechargez en précisant le nouveau fichier de configuration, d'autres paramétres sont possibles : x et y pour le centre de la carte, z pour un niveau de zoom, l pour forcer le layer actif, lb pour préciser un fond de plan actif.
Par exemple moi j'ai mis les zonages du PLU actuel sur la photo aérienne de 1953

Étape 4 : passez à la version Lorient agglomération du mviewer.

Organisation de la distribution

Malgrès quelques "aménagements" de la bibliothèque mviewer.js, nous avons décidé de procéder principalement par surcharge de l'application existante.
A cet effet, nous avons rajouté un répertoire apps dans lequel nous plaçons un répertoire par application (dont ce tutorial).
Dans chaque répertoire, nous dupliquons les fichiers que nous modifions, et nous ajoutons ce dont nous avons besoin en plus.

Mise en oeuvre

Je ne détaillerai pas les différentes étapes de la personnalisation de la charte graphique.
En fait, je ne l'ai pas faite moi même !
J'ai confié ce travail à ceux qui savent : notre webmaster (Emmanuel) et un développeur de la DSI (Bruno).
Merci à eux ...
Ce que je peux dire, c'est qu'il faut surcharger des CSS, faire des logos, des images de fond, etc. et changer le fichier index.html pour prendre tout ça en compte.
Mais le résultat est présenté dans cette version avec le nom index-agglo.html.
Libre à vous de vous en inspirer en consultant notre source.
Vous pouvez aussi nous contacter pour plus d'explication.
Au final cela donne ceci.

Voilà, vous travaillez avec la version Lorient agglomération !

Les principaux changements : Une fois le panneau de droite fermé, toute la place est allouée à la carte.

A ce stade, la charte graphique est différente, mais tout le reste est identique ...

Cependant de nouvelles possibilités s'offrent maintenant à vous !

Étape 5 : personnalisation de l'interface.

Le mviewer du géoBretgane vous propose 2 modes d'affichages pour le menu "fonds de plan".
Ce modes sont paramétrables dans le XML de configuration.
C'est l'attribut style de la balise baselayers.
Nous avons souhaité étendre ces modes pour proposer : De notre point de vue, la valorisation de cet attribut dans un fichier de configuration n'est pas satisfaisant.
Il nous paraît nécessaire de pouvoir jongler entre les différents modes depuis la page appelante.
En conséquence, nous avons modifié le source pour que cette information puisse être surchargée en passant un paramétre supplémentaire depuis l'URL. Il s'agit alors de préciser une valeur pour le paramétre blstyle.

De même un paramêtre "nologo" permet de faire disparaître le logo en haut du menu lorsqu'il prend la valeur "1".

Enfin un paramêtre "closedfleftpanel" permet de lancer l'interface avec le panneau fermé.

Ainsi, une même liste de couches et de fonds de plan peut être mise en forme de plusieurs façons.
Cela donne ceci :

Étape 6 : personnalisation des métadonnées.

L'outil permet de consulter des informations sur les couches qu'il présente.
En cliquant sur le bouton qui se trouve en face du nom de la couche, on lance une requête sur un service de métadonnées, et on affiche un résumé.
Le service de métadonnées associé à chaque couche est précisé dans la balise layer du fichier de configuration XML.
Nous avons souhaité affiner ce comportement.
Nous avons donc rajouté la prise en charge d'un nouvel attribut sur la balise layer.
Cet attribut se nomme metadata-local.
Il permet de préciser un fichier contenant un bout de code HTML.
Par convention nous plaçons ces fichiers dans le dossier metadata, et nous leur donnons l'extension '.tmpl'

C'est en exemple sur la configuration suivante.
Cliquez sur le bouton d'information en face de la couche urbanisme pour voir l'effet.
ICI, ICI,

Étape 7 : personnalisation du clic dans la carte.

Nous avons également souhaité pouvoir personnaliser le résultat d'un clic dans la carte.
Par défaut l'outil prend la liste des couches interrogeables et réalise une requête getFeatureInfo sur chacune d'elles. Il présente ensuite le résultat de façon générique.

Dans la configuration suivante, c'est ce qui se passe lorsqu'on active la couche des Lycées et que l'on clique sur un rond de couleur dans la carte.

Notre besoin est de court-circuiter ce mécanisme.
Par exemple, nous souhaitons pouvoir présenter un formulaire qui permettrait de modifer la données ou d'envoyer un mail ou d'enregistrer une demande d'intervention.


C'est en oeuvre ici sur les couches de collecte

La méthode retenue est la prise en compte d'un tableau de fonctions.
Ce tableau est défini en variable globale dans mviewer.agglo.js
Il se nomme LorientAgglo_Hooks

On définit ensuite des fonctions en langage javascript. Ces fonctions sont stockées dans un tableau associatif en prenant comme index la valeur de l'attribut id de la balise layer.
Ces définitions ne se font pas dans le code du mviewer.
On le fait dans des fichiers à part, laissant ainsi la liberté à chaque application d'inclure ou pas des comportements spécifiques.
Par convention on place ces fichiers dans le dossier lib en les nommant LA_Hook_XXXXX.js
Voir par exemple lib/LA_Hook_Collecte.js.
Nous avons fait le choix de laisser les informations dans la fenêtre venant se positonner dans la carte.
Par contre, l'édition d'un objet se fait dans une nouvelle fenêtre qui est modale.
Cela suppose l'ajout d'un div supplémentaire dans la page html. C'est une choix de la collectivité, le comportement étant définit par des javascripts spécifiques, chacun est libre de faire comme il le souhaite.
Lorsqu'on clique dans la carte, on commence par regarder s'il existe une fonction pour les couches affichées.
Si c'est le cas pour plusieurs couches, seule la dernière est pris en compte.

Dans mon exemple, j'occulte complètement l'ancien comportement. Ainsi en cliquant sur les Lycées, j'un message qui me précise que rien n'est définit pour cette couche.
Ceci peut être désactivé en enlevant la référence à LA_Hook_Defaut.js dans votre page.
De cette façon vous cumulez les deux comportements.
Si une couche active possède une fonciton javascript définie, c'ets elle qui est prise en compte.
Sinon, on revient au comportement par défaut du mviewer : l'appel à getFeatureInfo ...
Un exemple ici