Bienvenue sur la documentation mviewerstudio !

Introduction

Ci-dessous vous trouverez une documentation pour les utilisateurs ou administrateurs de l’outil de création d’application mviewerstudio.

Documentation utilisateur

Cette partie est dédiée aux utilisateurs qui souhaitent prendre en main l’interface de mviewerstudio.

Bien commencer

mviewerstudio est un générateur d’applications basé sur le visualiseur géographique mviewer. Il permet à tout utilisateur de créer son application cartographique mviewer en suivant les étapes de l’assistant de configuration.

Prérequis

Avant de vous lancer dans la belle aventure du mviewerstudio et de goûter les joies de monter sa propre application cartographique, vous devrez malgré tout vous être assuré·e d’avoir rempli les prérequis suivants :

• Le cas échéant, disposer d’un compte avec les droits suffisants pour vous connecter au mviewerstudio, si ce n’est pas le cas merci de contacter le·s administrateur·rice·s.
• Avoir déposé le ou les jeux de données « métier » nécessaires sur un catalogue en flux OGC en respectant les recommandations (exemple sur GéoBretagne).
• Avoir créé la ou les fiches de métadonnées nécessaires sur le catalogue partenaire (ou sur son propre catalogue CSW).
• Disposer des fichiers de styles (SLD) nécessaires.

Note

Sur GéoBretagne : pour plus de confort et d’autonomie, il est fortement conseillé d’être administrateur délégué de ses données.

Ouvrir une application existante

Deux choix sont offerts à l’utilisateur :

• Ouvrir un projet existant disponible sur un espace de stockage distant (serveur)

Chaque application accessible peut être prévisualisée, modifiée ou supprimée en cliquant sur les boutons associés. Si vous n’avez que le droit de prévisualisation c’est que l’application a été créée par un autre utilisateur de votre organisation. On visualise quelles sont les applications publiées, c’est à dire « en ligne » et les applications en mode « brouillon ».

Il est également possible de filtrer les applications selon un mot clé, une date ou un auteur à l’aide de la barre de recherche en haut.

Cliquez sur « Modifier » pour accéder à l’éditeur d’application.

• Ouvrir un projet existant disponible sur un espace de stockage local (fichier XML sur votre ordinateur)

Création d’un nouveau projet

Le générateur permet de créer son application en trois étapes :

1) Paramétrer son application

2) Thématiques & données

3) Publier son application

L’utilisateur peut basculer entre les étapes en cliquant sur l’étape de son choix via l’arbre de gauche ou via les boutons de bas de page Précédent / Suivant .

Il est aussi possible d’enregistrer , de prévisualiser ou de supprimer son projet tout le long du parcours de création.

Modes

Deux modes sont proposés pour des parcours utilisateur :

• mode simple par défaut

• mode avancé mode avancé avec des fonctionnalités supplémentaires pour les utilisateurs avancés

Crédits

Les liens en bas de page renvoient vers :

• le dépôt du code github
• la documentation sur readthedocs
• une fenêtre crédits avec les ressources utilisées (librairies, icônes, illustrations) :

1) Paramétrer son application

Le mode simple est servi par défaut. Vous pouvez basculer à tout moment sur le mode avancé en cliquant en haut à droite comme ci-dessous.

Champs principaux

• Titre de l'application (* champ obligatoire) : renseigner le titre de votre application cartographique (ex. « Le plan vélo de la Communauté de communes de Châteaugiron »). Il ne sera pas possible de changer de page sans renseigner de titre.
• mode avancé Mots clés : indiquer des mots clés permettant de décrire l’application.
• mode avancé URL du proxy : lien vers le proxy permettant l’interrogation CROSS DOMAIN des couches (Plus d’informations sur le proxy).
• mode avancé Lien vers le favicon : renseigner l’URL du fichier image à utiliser comme favicon de l’application.
• mode avancé Lien vers le site parent : renseigner le lien d’une page web vers laquelle l’utilisateur sera redirigé en cliquant sur le logo de l’application mviewer.
• Lien vers le logo : renseigner l’URL du logo de l’entité productrice de l’application qui apparaitra dans dans le bandeau de l’application (Exemple sur GéoBretagne, les logos des partenaires sont stockés ici).
• Thème de l'application : choisir le thème permettant de personnaliser l’interface de votre application (couleur).

Fonctionnalités

Activer les outils que vous souhaitez afficher au sein de votre application :

• Outils de zoom : cette option permet d’activer les outils de zoom +/- sur la carte.
• Outils de mesures : cette option permet d’activer les outils de mesures de distance et de surface.
• Export de la carte en image : cette option permet d’exporter une capture d’écran de la carte consultée.
• mode avancé Affichage des coordonnées au clic : cette option permet d’afficher dans le bandeau en haut les coordonnées du point cliqué.
• mode avancé Afficher les coordonnées correspondant à la position de la souris : cette option permet d’afficher les coordonnées correspondant à la position de la souris en bas à droite de la carte .
• mode avancé Afficher/masquer toutes les données d'une thématique : active la possibilité d’afficher toutes les données d’un thème en un clic.
• Se géolocaliser : cette option permet d’activer l’outil de géolocalisation (bouton permettant à l’utilisateur de se localiser sur la carte).
• mode avancé Ouvrir la carte dans le studio : active la possibilité d’ouvrir la carte en cours au sein d’un mviewerstudio pour édition.

Options de la carte

Paramétrer l’étendue et le zoom de la carte au démarrage de l’application. Ainsi, l’emprise de la carte sera le cadrage « par défaut » pour l’utilisateur à l’ouverture de l’application cartographique. L’affichage par défaut est paramétrable dans le fichier de configuration (voir option zoom et center dans Configurer le frontend mviewerstudio).

• Revenir à l'étendue initiale : cette option permet d’activer le bouton de retour à l’étendue initiale.
• mode avancé Interdire la navigation hors de l'étendue définie ci-dessus : bloque l’emprise de la carte sur l’emprise définie.

Fonds de plan

Sélectionner les fonds de plan à afficher en cochant la case ainsi que le fond de plan au démarrage.

• Fond de plan au démarrage : choix du fond de plan affiché par défaut .
• Mode d'affichage : choix entre le mode normal ou gallerie pour le changement de fond de plan mode avancé.

En mode avancé, il est possible de rajouter un fond de plan personnalisé à l’aide de ses paramètres en activant la checkbox. Veuillez ensuite sélectionner le type de couche parmi la liste et renseigner les champs nécessaires :

• Identifiant : paramètre obligatoire de type texte pour attribuer un identifiant unique et interne à la couche
• Libellé : paramètre obligatoire de type texte pour définir le nom du fond de plan
• URL : paramètre obligatoire de type url définissant l’URL du service web OSM, WMTS, WMS ou vector-tms.
• Identifiant technique de la couche : paramètre obligatoire de type texte définissant l’identifiant technique de la couche à utiliser
• Attribution : paramètre obligatoire alimentant le contrôle attributions de la carte
• Sous-titre : informations complémentaires sur le fond de plan comme le producteur
• Lien vers la vignette d'aperçu : paramètre obligatoire de type url permettant de sélectionner l’imagette à associer au fond de plan.
• Format d'image : paramètre optionnel de type texte définissant le format d’image retourné par le serveur. (Obligatoire pour les couches de type WMS et WMTS)
• Nom du style : paramètre optionnel précisant le style à associer à la couche. (Obligatoire pour les couches de type WMTS et vector-tms. Pour le type vector-tms, le style correspond à la valeur indiquée en tant que première clé de la propriété « sources » du fichier de style au format JSON).
• Matrixset : paramètre optionnel précisant le style à associer à la couche. Paramètre obligatoire pour les couches de type WMTS si le paramètre fromcapacity n’est pas activé
• Lien vers le fichier de style (JSON) : paramètre optionnel de type url définissant le fichier de style au format JSON à utiliser. (Obligatoire pour les couches de type vector-tms)

Synthèse des options

Par type (en gras obligatoire)

Type	WMTS	WMS	Vector-TMS
Identifiant	X	X	X
Libellé	X	X	X
URL	X	X	X
Identifiant technique	X	X	X
Attribution	X	X	X
Sous-titre	x	x	x
Lien vers vignette	X	X	X
Lien vers fichier de style			X
Format d’image	X	X
Nom du style	X		X
Matrixset	x

Exemples de saisies

Type	WMTS	WMS	Vector-TMS
Identifiant	ign_rpg	osm_default	ign_bdtopo
Libellé	RPG IGN	OpenStreetMap GéoBretagne	BDTOPO IGN
URL	https://wxs.ign.fr/agriculture/geoportail/wmts	https://osm.geobretagne.fr/gwc01/service/wms	https://wxs.ign.fr/topographie/geoportail/tms/1.0.0/BDTOPO/{z}/{x}/{y}.pbf
Identifiant technique	LANDUSE.AGRICULTURE2021	osm:map	BDTOPO
Attribution	IGN RPG	OpenStreetMap	IGN BDTOPO
Sous-titre	IGN RPG	OpenStreetMap	IGN BDTOPO
Lien vers vignette	https://geobretagne.fr/pub/logo/099_ign.jpg	https://geobretagne.fr/pub/logo/161_osmfr.jpg	https://geoservices.ign.fr/sites/default/files/2022-04/BD%20TOPO%20-%20600x286px_0.png
Lien vers fichier de style			https://wxs.ign.fr/static/vectorTiles/styles/BDTOPO/routier.json
Format d’image	image/png	image/png
Nom du style	normal		bdtopo
Matrixset	PM

Après avoir renseigné l’ensemble des paramètres valides, cliquez sur « Ajouter ». Le fond de plan apparaît dans la liste. Il est nécessaire de l’activer pour qu’il soit visible dans l’application.

Note

Note Il n’est pas possible de modifier les paramètres d’un fond de plan ajouté. Il faut réitérer la saisie.

Recherche

Activer la recherche pour offrir à vos utilisateurs la possibilité de se localiser grâce à une barre de recherche :

• A l'adresse : localisation à l’adresse via le service de la Base adresse nationale ou tout autre service.
• Activer la recherche d'entités mode avancé: la recherche peut être activée si la donnée est de type GEOJSON. Cette fonctionnalité est également activable pour les données de type WMS à la condition que les entités qui composent cette donnée soient également indéxées dans Elasticsearch.

Page d’accueil (mode avancé)

Il est possible de paramétrer une page d’accueil / documentation en indiquant un lien vers une page web (format .html).

• Titre de la fenêtre d'aide / accueil mode avancé: Indiquer le titre de la modal avec les informations relatives à l’application (accueil ou aide).
• Icône du bouton mode avancé: Sélectionner une icône pour le bouton d’accès à la page d’aide (localisé dans le bandeau de l’application).
• Lien vers la page d'accueil mode avancé: Indiquer l’URL vers la page d’aide au format .html.
• Afficher la page d'accueil par défaut mode avancé: Affiche la page d’accueil au lancement de l’application.

Navigation

A la fin du paramétrage de la rubrique « Application », l’utilisateur clique sur le bouton suivant pour poursuivre la configuration de son application cartographique en passant à la rubrique « Thématiques et données ». Une sauvegarde de l’application sera réalisée à ce moment là.

2) Thématiques & données

Définir les thématiques et les données de son application.

Paramétrer ses thématiques

L’utilisateur peut organiser le panneau des thématiques et des données présentes à gauche de l’application.

Le mot « données » correspond à un ou des jeu(x) de données que vous souhaitez ajouter à votre application. Vous avez la possibilité de regrouper un ou plusieurs jeux de données sous une « thématique ». Exemple, je veux ajouter les deux couches de données (linéaire du plan vélo et des abris vélo) sous une thématique « Plan Vélo ».

Deux options sont offertes à l’utilisateur pour définir ses thématiques :

1. Créer : pour créer votre thématique et y associer vos jeux de données « métier »
2. Importer : pour réutiliser une thématique déjà créée au sein de la communauté mviewer (ex. la thématique des découpages territoriaux qui contient les limites de communes, EPCI et départements)

Option - Créer une thématique

En cliquant sur le bouton créer, une fenêtre de paramétrage de la thématique sélectionnée s’ouvre.

• Nom : renseigner le nom de la thématique (ex. Ports).
• Déroulée par défaut : option permettant d’afficher le contenu de la thématique par défaut.
• Icône : sélectionner l’icône illustrant la thématique. Pour rechercher un mot clé en anglais, utiliser la recherche du navigateur (taper CRTL+F).

Option - Importer une thématique externe

En cliquant sur Importer, vous pouvez importer une·des thématique·s existante·s (voir option external_themes dans Configurer le frontend mviewerstudio).

Il est possible de filtrer les thématiques à l’aide de la barre de recherche en saisissant un mot clé (thème, organisme) et de gérer l’affichage des thématiques grâce au système de pagination.

Les thématiques importées ne sont pas configurables, elles sont visibles dans l’application comme elles sont définies dans l’application source (nom, icône, données et options des données). Il est toutefois possible de gérer certains paramètres. Dans la liste des thématiques, cliquez sur le bouton .

Une nouvelle fenêtre s’ouvre avec l’option suivante :

• Affichage des données de la thématique : Option permettant de gérer l’affichage des données de la thématique lors du démarrage de l’application : tout afficher, rien ou comme dans l’application source.

Ajouter une donnée

Depuis la fenêtre Paramètres de la thématique sélectionnée il est possible d’ajouter des données à cette thématique via le bouton .

L’ajout d’un nouveau jeu de données peut se faire avec une recherche dans un catalogue et en saisissant les paramètres de base.

Ajouter une donnée depuis un catalogue

Vous pouvez chercher un jeu de données dans un catalogue (ex. Région Bretagne). Vous pouvez valider votre recherche en tapant sur la touche Entrée de votre clavier ou sur l’icone loupe :

• par mot-clé :

• mode avancé en renseignant l’adresse du catalogue fournisseur ou d’un service WMS.

Ajouter une donnée depuis des paramètres

Si le jeu de donnée n’est pas disponible dans un catalogue, il est possible de rajouter une donnée à l’aide des paramètres. Cliquez sur le second onglet et sélectionnez le type de la donnée parmi la liste (WMS, vector-TMS). Indiquez ensuite les paramètres en veillant à leur validité :

• ID : paramètre de type texte qui renseigne l’identifiant technique de la couche côté serveur WMS ou WFS
• Nom : nom de la donnée dans l’application
• URL : paramètre de type URL (URL du service web)
• Lien vers le fichier de style : pour les couches de type vector-tms uniquement, il indique l’URL vers le fichier de style au format JSON.
• Nom du style : pour les couches de type vector-tms uniquement, titre à utiliser pour la liste des styles associés

Paramétrer ses données

Une fois cliqué sur Sélectionner, la donnée est ajoutée à l’arborescence. Vous pouvez modifier les paramétrages en cliquant sur .

Onglet Général

L’onglet général recense les principales options de la donnée.

• Nom : nom de la donnée dans notre application.
• Attribution : source de la donnée.
• Opacité : opacité par défaut de la donnée.
• Afficher la donnée au démarrage de l'application : la donnée s’affiche au lancement de l’application.
• Afficher la donnée en première position de la carte : la donnée s’affiche toujours au-dessus des autres données qui n’ont pas activée cette option.
• Styles disponibles : choix du·des style·s de la donnée dans notre application. Possibilité d’éditer le libellé du style.
• Libellé de la liste des styles : Titre de la liste de sélection des styles.

Onglet Interrogation

L’onglet interrogation recense les options relatives à l’interrogation de la donnée. Concrètement ces options permettent de gérer l’affichage des informations supplémentaires d’une donnée lorsque l’on clique sur une entité sur la carte.

• Activer l'interrogation de la donnée au clic sur la carte : active l’interrogation de la donnée.

• Position de la fiche d'information : affichage de la fiche d’information à droite ou en bas.

• Limitation du nombre de réponses mode avancé: limitation du nombre d’entités interrogées.

• Format de la fiche d'information : option permettant de choisir le format d’affichage de la fiche d’information.

  • Standard : affichage par défaut de la fiche d’information tel que défini par le serveur géographique
  • Personnalisé : affichage personnalisé de la fiche à l’aide d’un template

Pour personnaliser l’affichage de la fiche d’information, deux options sont possibles :

• Configurer une fiche d’information : créer une fiche personnalisée à l’aide du générateur de template (voir la rubrique « Configurer une fiche d’information » ci-dessous).
• Utiliser un template externe mode avancé: cette option permet d’activer l’utilisation d’un template externe en indiquant le lien vers un fichier .mst disponible en ligne.

Avertissement

L’activation de la fonctionnalité « Utiliser un template externe » prend le dessus sur le template construit à l’aide du générateur.

Onglet filtre dynamique

L’onglet filtre dynamique permet de filtrer la donnée via une liste déroulante entre différentes valeurs.

• Nom du filtre : nom du filtre dans l’application.
• Champs à filtrer : champ sur lequel le filtre va être effectué.
• Valeur(s) sélectionnée(s) : valeurs disponibles dans le filtre.

Onglet options avancées

L’onglet options avancées donne accès aux fonctionnalités avancées. Disponible uniquement en mode avancé

• mode avancé Index de couche : Position dans l’ordre d’affichage des données sur la carte et la légende au démarrage de l’application.
• mode avancé Echelle mini / maxi : Echelle minimale et maximale d’affichage de la donnée.
• mode avancé Affichage tuilé : Affichage tuilé de la donnée. La donnée est chargée progressivement.
• mode avancé Affichage exclusive de la données : L’affichage de cette couche masquera automatiquement toutes les autres couches ayant ce paramètre activé.
• mode avancé Ne pas afficher la donnée dans la légende : Permet de rendre la couche seulement visible sur la carte et invisible dans les thématiques et la légende.
• mode avancé Utiliser un style externe : Lien vers un style SLD remplaçant le style du serveur cartographique.
• mode avancé Type de légende : Possibilité de mettre une légende personnalisée vers un fichier image (via une URL).
• mode avancé Lien vers une légende personnalisée : URL vers un fichier afin d’afficher la légende à partir d’une image.
• mode avancé Adapter la légende selon le zoom de la carte : Précise si la légende est liée à l’échelle de la carte et si elle nécessite d’être actualisée à chaque changement d’échelle de la carte.
• mode avancé Métadonnées : Lien vers la métadonnée. Ne pas modifier.
• mode avancé Type de donnée : Lien vers la donnée. Ne pas modifier.
• mode avancé Métadonnées : Lien vers la métadonnée. Ne pas modifier.

Onglet filtre statique

L’onglet filtre statique permet de filtrer les données à afficher sur la carte. Disponible uniquement en mode avancé

• mode avancé Filtre attributaire : Filtre selon un attribut. Utilisation d’un filtre cql.
• mode avancé Filtre géographique : Filtre selon la géométrie. Utilisation d’un filtre cql.

Onglet recherche

L’onglet recherche permet d’activer la recherche dans l’application sur cette donnée. Cela nécessite un moteur de recherche elasticsearch pour une donnée WMS ou une donnée vectorielle type geojson pour le mode fuse. Disponible uniquement en mode avancé

Paramétrer une fiche d’information

Depuis le mviewer studio, il est possible de personnaliser l’affichage d’une fiche d’information pour une donnée identifiée en sélectionnant les champs visibles pour l’utilisateur et leurs formes.

Créer une fiche d’information personnalisée

Depuis les paramètres de la donnée, sélectionnez l’onglet « Interrogation » et le type de format Personnalisé dans la liste :

Puis à la rubrique « Configurer la fiche d’information », cliquez sur le bouton « + Créer ».

Note

La position de la fiche d’information souhaitée doit préalablement être sélectionnée. Elle conditionne ensuite l’affichage des composants au sein du générateur.

Interface du générateur de template

Une nouvelle fenêtre s’ouvre. Cette fenêtre est divisée en deux, un bloc à gauche permettant de configurer la fiche d’information et ses composants, un bloc à droite permettant de prévisualiser la fiche configurée. On retrouvera cette configuration pour une fiche positionnée en bas mais avec un alignement vertical. On visualise également le nom du jeu de donnée pour lequel on configure la fiche d’information et la position de la fiche en haut de la fenêtre.

Note

La prévisualisation est basée sur la première entité retournée du jeu de donnée. Si les champs du jeu de données ne sont pas renseignés correctement (valeur nulle), l’affichage peut être perturbé.

Ajouter des composants à la fiche d’information

Il est maintenant nécessaire de peupler le bloc de gauche avec des composants en cliquant sur le bouton « Ajouter un composant ». Une nouvelle fenêtre s’ouvre avec une liste de composants disponibles et préformatés :

• Titre : composant permettant d’afficher un titre et nécessitant une valeur de type texte en entrée.
• Sous-titre : composant permettant d’afficher un sous-titre et nécessitant une valeur de type texte en entrée.
• Iframe : composant permettant d’afficher une fenêtre externe / widget nécessitant une valeur de type « url » en entrée.
• Image : composant permettant d’afficher une image nécessitant une valeur de type « url » en entrée.
• Bouton : composant permettant d’afficher un bouton avec une redirection vers une ressource externe en ligne et nécessitant une valeur de type « url » en entrée.
• Chiffre clé : composant permettant d’afficher un chiffre clé à mettre en avant et nécessitant une valeur de type « nombre » en entrée.
• Liste : composant permettant d’afficher une liste et nécessitant un champ composé d’une liste comme indiqué dans la documentation mviewer.
• Texte : composant permettant d’afficher un texte et nécessitant une valeur de type texte en entrée.

Sélectionnez un composant et cliquez sur « Enregistrer » pour l’ajouter. Il n’est possible d’ajouter qu’un composant à la fois, veuillez réitérer l’opération pour ajouter des composants supplémentaires.

Note

Dans le cas d’une configuration pour la fiche d’information positionnée en bas, le nombre de composants est limité à 6, répartis sur 2 colonnes afin d’optimiser l’affichage. Pour aller plus loin, il est nécessaire de créer manuellement un template .mst et de l’importer en tant que template externe en s’aidant des modèles disponibles sur la page des démonstrations mviewer.

Configurer les composants

Une fois les composants ajoutés, il est nécessaire de configurer chaque composant en définissant les informations à afficher et les options associées.

Synthèse des options

Title

Composant	Valeur à partir d’un champ	Valeur à partir de plusieurs champs	Valeur à partir d’une saisie libre	Couleur	Icône	Label	Style CSS
Titre	x	x	x	x
Sous-titre	x	x	x	x
Texte	x	x	x
Image	x		x
Bouton	x		x	x	x	x
Liste	x		x
Iframe	x		x				x
Chiffre clé	x	x	x	x	x	x

Valeur

Dans le bloc du composant, veuillez sélectionner la source de l’information à afficher parmi la liste « Choisir un type » :

• A partir d’un champ :

La valeur est définie dans un champ du jeu de donnée. Il faut ensuite sélectionner le champ à afficher dans la seconde liste.

• A partir de plusieurs champs :

La valeur est une concaténation de plusieurs champs au sein du jeu de données ainsi que de valeurs saisies librement. Il faut saisir les champs dans le deuxième bloc en tapant le nom du champ puis en sélectionnant le champ dans la liste d’auto-complétion. Validez le champ à ajouter à l’aide de touche « Entrer ». Vous pouvez également ajouter du texte fixe en saisissant les caractères et validez avec la touche « Entrer ».

• Saisie libre :

La valeur est une saisie de texte libre réalisée par l’utilisateur. Le texte saisie est statique, il sera affiché pour l’ensemble des entités du jeu de donnée.

Pour une utilisation avancée, il est possible d’utiliser la syntaxe Mustache dans le bloc de saisie à l’aide des {{nom_du_champ}} ainsi que certaines balises .html comme le retour à la ligne </br> :

Réserve naturelle de Bretagne </br> {{nom}}

Veuillez vous reporter à la documentation mviewer pour en savoir plus sur la rédaction d’un template avec Mustache.

Couleur

Pour certains composants, il est possible de personnaliser la couleur du texte et du fond. Cliquez sur le carré coloré et sélectionnez la couleur souhaitée dans la palette ou en saisissez une valeur RGB, HSL ou HEX.

Icône

Pour certains composants, il est possible d’associer un icône. L’icône est issu de la librairie font-awesome. Pour ajouter un icône, cliquez sur le bouton « Choisir » et sélectionnez votre icône dans la librairie.

Label

Pour certains composants, il est possible d’associer une description. Dans le champ de saisie associé, indiquez le texte souhaité pour la description du chiffre clé ou le label du bouton par exemple.

Prévisualiser votre fiche d’information

Lors de la configuration de la fiche d’information, il est possible de prévisualiser le résultat à tout moment en cliquant sur le bouton « Prévisualiser » en haut à droite :

Pour rappel, la prévisualisation est basée sur une la première entité du jeu de donnée. L’affichage peut être perturbé si les champs du jeu de données ne sont pas renseignés correctement (valeur nulle).

Gérer les composants

Déplacer

Il est possible de modifier l’ordre d’affichage des composants via un glisser/déposer. Positionnez la souris sur le titre ou l’icône du composant et déplacez le bloc à l’emplacement souhaité.

Supprimer

Pour supprimer un composant, cliquez sur l’icône en haut à droite du bloc.

Enregistrer la fiche d’information

Lorsque la configuration est terminée, cliquez sur le bouton « Enregistrer » en bas de la fenêtre pour enregistrer la fiche d’information.

Gérer une fiche d’information

Editer

Il est possible à tout moment de modifier la fiche d’information. Après avoir ouvert l’onglet « Interrogation » dans les paramètres de la donnée, cliquez sur l’icone pour éditer la fiche à l’aide du générateur.

Supprimer

Pour supprimer définitivement la fiche d’information personnalisée, cliquez sur l’icône .

Modifier la position

Si vous modifiez la position de la fiche d’information après avoir configuré un template, il est préférable de vérifier l’affichage des composants et d’ajuster la disposition si nécessaire.

3) Publier son application

La configuration de votre application est terminée. Vous pouvez prévisualiser le résultat, télécharger le fichier .XML ou publier l’application sur un serveur.

Publier une application depuis le studio

Note

Note Cette fonctionnalité est disponible si et seulement si l’instance sur laquelle vous créez votre application est configurée pour publier une application en production.

Pour publier votre application, cliquez sur « Publier votre application ». Une nouvelle fenêtre s’ouvre :

• Nouveau nom : nom de l’application publiée, par défaut c’est le nom saisi lors de la création. Ce nom sera visible dans le lien de l’application et sera également le nom du dossier sur le serveur.

Pour valider le processus, cliquez sur « Publier votre application ».

Une fenêtre indique que l’application a été publiée avec succès :

• Lien de partage : Lien de l’application en production permettant d’y accéder. Ce lien est fixe permettant une mise en production de l’application.
• Intégration en iframe : Code HTML à copier/coller pour intégrer la carte dans une page web

Vous pouvez ensuite poursuivre vos modifications ou retourner à l’accueil.

Gérer son application

La gestion de son application est possible depuis la barre de navigation située en haut à droite des différents modules du studio :

• Enregistrer : permet d’enregistrer les modifications de son application.
• Prévisualiser : permet de prévisualiser son application avec la configuration actuelle dans un nouvel onglet du navigateur.
• Supprimer : permet de supprimer définitivement son application.
• Dépublier : permet de dépublier son application quand celle-ci a été publiée auraparavant (voir rubrique ci-dessous).
• Options mode avancé : permet d’accéder à des options supplémentaires. Visible seulement si l’application est enregistrée.

Gérer la publication d’une application

Note

Note Cette fonctionnalité est disponible si et seulement si l’instance sur laquelle vous créez votre application est configurée pour publier une application en production.

Par défaut, une nouvelle application est créee en mode « brouillon ». Le mode « brouillon » signifie que l’application est disponible depuis le mviewer studio, les modifications sont enregistrables et prévisualisables. Toutefois, l’application n’est pas accessible en ligne via une url stable tant qu’elle n’a pas été publiée.

Dès que l’application a été publiée, comme expliqué dans la rubrique 3, le statut de celle-ci devient « en ligne ». Votre application est alors accessible par tous via le lien disponible dans la fenêtre de publication.

Nouvelles modifications

Lorsque vous réalisez de nouvelles modifications sur votre application, il est nécessaire de la republier pour appliquer les changements à votre application en ligne.

Dépublier une application

Il est possible de dépublier une application, si par exemple les données sont obsolètes. Pour la rendre innaccessible, cliquez sur le bouton « Dépublier » dans la barre de navigation. Après cette action, votre application passera en mode « brouillon ». Les ressources associées seront également supprimées du serveur de production.

Vous pouvez donc effectuer les changements nécessaires et la publier de nouveau dès que l’application est stable.

Gérer l’historique des modifications

Note

Note Cette fonctionnalité est accessible en mode avancé.

Lorsque l’on enregistre une application, chaque enregistrement est consigné en associant les modifications réalisées. Cet historique des modifications est visible dans une nouvelle fenêtre depuis le bouton « Options », « Historique des modifications » :

Créer une version

Il est possible de créer une version spécifique avec des modifications associées.

Après avoir importé une nouvelle thématique dans l’application, ouvrez la fenêtre « Historique des modifications » puis cliquez sur « Marquer cette version ». Ajoutez ensuite une description à la version et enregistrez:

Cette version marquée est maintenant disponible et identifiée dans l’historique.

Gérer les versions

Depuis la fenêtre « Historique des modifications », il est possible de gérer les versions avec les actions suivantes :

• Voir les versions marquées : permet de filtrer les versions marquées par l’utilisateur
• Prévisualiser : en cliquant sur l’icône « oeil » dans le tableau, l’utilisateur peut prévisualiser les versions précédentes dans un nouvel onglet du navigateur
• Restaurer : en cliquant sur l’icône « flèche » dans le tableau, l’utilisateur peut restaurer son application à une version précédente. Attention, cette action est irréversible, les modifications antérieures à la version restaurée seront supprimées.

Documentation technique

Cette partie est dédiée aux personnes qui ont vocation à déployer et configurer mviewerstudio.

Installer mviewerstudio avec Python

Mviewerstudio est une application web développée en HTML / CSS / PHP / Python. Elle nécessite simplement d’être déployée sur un serveur WEB qui peut être APACHE, NGINX, TOMCAT…

Installation

Prérequis

Vous aurez besoin :

• d’installer les dépendances (Linux/Debian):

sudo apt install libxslt1-dev libxml2-dev python3 python3-pip python3-venv
pip install virtualenv

• d’une version Python >= 3.9
• d’une instance mviewer fonctionnelle (/mviewer)

Procédures d’installation

Note

Avant de réaliser l’installation, vous devez avoir connaissance de la différence entre un environnement de production et un environnement de développements.

L’environnement de production est la destination finale d’une application web ou d’un site web. C’est l’environnement final qui sera accessible par vos utilisateurs.

L’environnement de développement représente le contexte dans lequel vous allez réaliser des développements, des modifications du code ou des tests avant de réaliser le passage de l’application dans l’environnement de production final.

Installation manuelle

#Récupération des sources
git clone https://github.com/mviewer/mviewerstudio.git
#Positionnement sur la branche ou la version choisie
cd mviewerstudio
git checkout develop
STATIC_DIR=srv/python/mviewerstudio_backend/static
#Création du dossier apps
mkdir -p "${STATIC_DIR}/apps"
#Copie des dossiers ressources dans le dossier static
cp -r css img js lib index.html mviewerstudio.i18n.json "${STATIC_DIR}"
#Création de l'environnement virtuel Python et installation des dépendances
cd srv/python
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt -r dev-requirements.txt
pip install -e .

Installation scriptée

Téléchargez le script d’installation

sudo apt install curl
curl -O https://raw.githubusercontent.com/mviewer/mviewerstudio/master/srv/python/install_backend_python.sh

Le script utilise 2 paramètres optionnels :

• <path> : Le chemin dans lequel installer mviewerstudio (par défaut le répertoire d’exécution du script)
• <branch> : La branche à installer (par défaut master)

Exemple pour installer mviewerstudio dans le répertoire /git en utilisant la branche develop :

sh ./install_backend_python.sh /home/monuser develop

Configuration

Configuration du front

Récupérez le fichier config-python-sample.json (à la racine du projet) et copier son contenu dans le fichier /srv/python/mviewerstudio_backend/static/apps/config.json. Adaptez ensuite les paramètres selon votre environnement (aidez-vous de la page Configurer le frontend mviewerstudio).

Avertissement

Le paramètre mviewer_instance doit finir par /

Note

Le paramètre user_info_visible est à utiliser si vous instance est sécurisée (avec geOrchestra par exemple).

Note

Le paramètre proxy est à laisser vide si vous n’utilisez pas de proxy.

Variables d’environnement du backend

Ces variables doivent être définies dans l’environnement (console batch ou service)

• CONF_PATH_FROM_MVIEWER: répertoire d’accès à partir de l’instance mviewer.
• CONF_PUBLISH_PATH_FROM_MVIEWER: répertoire de publication à partir de l’instance mviewer.
• EXPORT_CONF_FOLDER: répertoire d’accès à partir de l’instance mviewer.
• LOG_LEVEL: Niveau logs (voir https://docs.python.org/3/library/logging.html)
• MVIEWERSTUDIO_PUBLISH_PATH: Répertoire de publication lors du passage du mode brouillon au mode publié.
• DEFAULT_ORG: Nom de l’organisation par défaut à utiliser pour un usage non sécurisé (e.g en dehors d’un georchestra, ANONYMOUS).

Autres Variables

Pour utiliser les services types OGC (catalogue ou serveurs cartographiques), vous aurez besoin d’utiliser le proxy. Le Proxy interne proposé par mviewer (« /mviewerstudio/proxy/?url= ») utilise un paramètre PROXY_WHITE_LIST qui doit être complété par tous les domaines (FQDN) des services que vous utiliserez. Ce paramètre est accessible dans :

• /srv/python/mviewerstudio_backend/settings.py

Lancement de l’application avec Flask

cd mviewerstudio/srv/python
source .venv/bin/activate
export FLASK_APP=python/mviewerstudio_backend.app
export CONF_PATH_FROM_MVIEWER=apps/store
export EXPORT_CONF_FOLDER=/home/monuser/mviewer/apps/store/
export MVIEWERSTUDIO_PUBLISH_PATH=/home/monuser/mviewer/apps/prod
export CONF_PUBLISH_PATH_FROM_MVIEWER=apps/prod
export DEFAULT_ORG=megalis
flask run -p 5007

Mise en production

Cette partie décrit l’installation en production de mviewerstudio sur un serveur Linux (Ubuntu / Debian) avec le backend python.

Prérequis

• Disposer d’un serveur web (Apache ou Nginx)
• Disposer d’une instance mviewer sur le même serveur (ex : /var/www/mviewer)
• Disposer des droits sudo
• Avoir installé mviewerstudio avec la méthode décrite dans la partie précédante

Mode opératoire

• Servir le backend python et le front de studio avec un service Linux
• Proxyfier ce service avec Nginx ou Apache

1) Création des dossiers de stockage dans le dossier mviewer/apps

Création du répertoire de stockage des brouillons (store) et des applications publiées (prod).

mkdir /var/www/mviewer/apps/store
sudo chown monuser /var/www/mviewer/apps/store
mkdir /var/www/mviewer/apps/prod
sudo chown monuser /var/www/mviewer/apps/prod

2) Création du service et activation du service

Créer le répertoire mviewerstudio dans /var/log

sudo mkdir /var/log/mviewerstudio
sudo chown monuser /var/log/mviewerstudio

Vous devez créer un fichier dans /etc/systemd/system/mviewerstudio.service:

sudo nano /etc/systemd/system/mviewerstudio.service

Ajoutez ensuite ce contenu en adaptant les valeurs (chemin, user…) selon votre environnement :

fichier mviewerstudio.service

[Unit]
 Description=mviewerstudio
 After=network.target

 [Service]
 User=monuser
 Environment="EXPORT_CONF_FOLDER=/var/www/mviewer/apps/store/"
 Environment="CONF_PUBLISH_PATH_FROM_MVIEWER=apps/prod"
 Environment="CONF_PATH_FROM_MVIEWER=apps/store"
 Environment="MVIEWERSTUDIO_PUBLISH_PATH=/var/www/mviewer/apps/prod"
 Environment="DEFAULT_ORG=public"
 Environment="LOG_LEVEL=INFO"
 WorkingDirectory=/home/monuser/mviewerstudio/srv/python
 ExecStart=/home/monuser/mviewerstudio/srv/python/.venv/bin/gunicorn \
     -b 127.0.0.1:5007 \
     --access-logfile /var/log/mviewerstudio/gunicorn-access.log \
     --log-level info \
     --error-logfile /var/log/mviewerstudio/gunicorn-error.log \
     mviewerstudio_backend.app:app

 [Install]
 WantedBy=multi-user.target

Notre service tournera donc sur le port 5007 une fois démarré.

Activation et démarrage du service :

sudo systemctl daemon-reload
sudo systemctl enable mviewerstudio.service
sudo systemctl start mviewerstudio.service

A partir de maintenant, il est possible de stopper, redémarrer ou afficher le service avec les commandes :

sudo systemctl stop mviewerstudio
sudo systemctl restart mviewerstudio
sudo systemctl status mviewerstudio.service

3) Proxyfication du service

Notre service tourne sur le port 5007. Nous souhaitons que ce service soit accessible sur les ports 80 et 443 à l’adresse /mviewerstudio/. Nous allons donc opérer une proxyfication de ce service.

Configuration nginx

location /mviewerstudio {
     proxy_pass http://127.0.0.1:5007/;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_set_header X-Forwarded-Proto $scheme;
     proxy_set_header X-Forwarded-Host $host;
 }

Rechargement de la conf nginx

sudo systemctl reload nginx

Configuration apache

<Location "/mviewerstudio">
    ProxyPass "http://127.0.0.1:5007"
    ProxyPassReverse "http://127.0.0.1:5007"
</Location>

Rechargement de la conf apache

sudo systemctl reload apache2

Mise à jour de l’application

Pour mettre à jour le code source (e.g branche develop), vous pouvez utilisez le script mviewerstudio/srv/python/sync.sh après un git pull.

Il permet de copier / coller les sources vers le répertoire static du backend Python.

Pour la mise à jour, voici donc les commandes à exécuter à partir du répertoire /mviewerstudio :

cd /full/path/mviewerstudio
git pull
cd srv/python
sh ./sync.sh pull /full/path/mviewerstudio

Si besoin, réaliser un restart de votre service (e.g gunicorn) :

systemctl restart mviewerstudio

Pour tout redémarrage de gunicorn, vérifier que le service a bien démarré :

systemctl status mviewerstudio

Avertissement

Il est possible que Git n’ait pas terminé d’écrire un fichier lors de l’arrêt du service. Le service peut alors démarrer et s’arréter.

Si vous constater dans le fichier de log d’erreur gunicorn que c’est bien le cas, redémarrer le service avec la commande systemctl restart mviewerstudio

Autres types d’installations possibles

SI vous ne pouvez installer mviewerstudio via python, il est aussi possible d’utiliser PHP ou docker.

Installer avec le Backend PHP

Avertissement

L’installation via le backend PHP ne donne pas accès à toutes les fonctionnalités disponibles dans mviewerstudio (Exemple : gestion des versions, publication, création de templates…).

Prérequis

Apache 2, PHP 7

Ainsi qu’une instance mviewer fonctionnelle (/mviewer).

Install

Clone du projet dans le répertoire apache : git clone https://github.com/mviewer/mviewerstudio

Copie du fichier de conf : cp config-sample.json apps/config.json

Modification des chemins d’accès dans le config.json :

"upload_service": "srv/php/store.php",
"delete_service": "srv/php/delete.php",
"list_service": "srv/php/list.php",
"store_style_service": "srv/php/store/style.php",
"user_info": "srv/php/user_info.php",

Docker

Vous pouvez utiliser la composition docker présente à la racine du dépot. Le Dockerfile permet de construire l’image pour un usage de production.

TODO

Configurer le frontend mviewerstudio

Le frontend Mviewerstudio dispose actuellement de deux backend :

• Python (nouveau)
• PHP (historique)

Selon le backend, il convient d’utiliser la bonne configuration pour la partie frontend.

Avertissement

Une réflexion est en cours au sein de la communauté mviewerstudio afin de savoir s’il est pertinent de conserver deux backend. Un des backend (potentiellement PHP) sera amené à disparaître sur le moyen terme.

Pour savoir quelle configuration utiliser, vous trouverez deux fichiers à la racine du projet :

• config-python-sample.json

A utiliser si vous avez un backend Python. Ce fichier de configuration sera copié automatiquement via le script d’installation (ou à copier manuellement) dans le répertoire srv/python/mviewerstudiobackend/static/apps sous le nom config.json.

• config-php-sample.json

A utiliser si vous avez un backend PHP. Ce fichier de configuration sera à copier manuellement à la racine sous le nom config.json.

Python - Structure du fichier de configuration

Voici le fichier d’exemple à utiliser et à adapter selon votre environnement :

https://github.com/mviewer/mviewerstudio/blob/master/config-python-sample.json

PHP - Structure du fichier de configuration

Pour PHP, il convient de bien renseigner le paramètre is_php à "true" et de bien renseigner les services pour l’entrée "php"

Voici le fichier d’exemple à utiliser et à adapter selon votre environnement :

https://github.com/mviewer/mviewerstudio/blob/master/config-php-sample.json

Paramètres du fichier de configuration

La configuration s’effectue dans le fichier config.json (voir au-dessus pour plus d’information sur le fichier).

Paramètres généraux

Ces paramètres sont à renseigner dans tous les cas.

• studio_title : nom de l’application tel qu’il apparaîtra dans la barre de navigation (navbar) de l’application et le titre de la page dans votre navigateur internet.
• mviewerstudio_version: version compatible de mviewerstudio (laisser la valeur par défaut)
• mviewer_version: version compatible mviewer (laisser la valeur par défaut)
• mviewer_instance : URL de l’instance mviewer utilisée (par exemple http://localhost/mviewer/).
• conf_path_from_mviewer : Chemin permettant de charger le fichier de configuration généré depuis le mviewer. Le chemin peut être relatif (par exemple ../mviewer/conf/).

• mviewer_short_url : Utilisation du système d’URL courtes (mviewer/#monappli au lieu de mviewer/?config=apps/monappli.xml).

  • used : true | false.
  • apps_folder : chemin d’accès depuis le répertoire apps (exemple store pour apps/store).
  • public_folder : (pour backend Python seulement) - chemin d’accès depuis le répertoire apps pour les éléments publiés (exemple store pour apps/public).

• external_themes : Utilisation du mécanisme d’import de thématiques externes (présentes dans d’autres mviewers).
• proxy : Chemin du proxy par lequel les requêtes envoyées par mviewerstudio passeront. Valeur par défaut si ce paramètre est absent ../proxy/?url=.
• used : Booléen -> Utiliser "true" pour permettre le chargement et l’utilisation des thématiques externes.
• logout_url : URL utilisée par le menu de déconnexion.

• app_form_placeholders : Exemples de valeurs présentes dans le formulaire de création de l’application.

  • app_title : Nom de l’application qui sera créée.
  • logo_url : URL du logo à afficher dans l’application.
  • help_file : Nom du fichier contenant l’aide à afficher par l’application.
  • map : Paramétrage du cadrage initial de la carte grâce aux propriétés center et zoom.
  • center : coordonnées du centre de la carte.
  • zoom : niveau de zoom.

• baselayers : cette section concerne le paramétrage des fonds de plan.
• data_providers : cette section concerne le paramétrage des différents fournisseurs de données.

Paramètres obligatoires avec Python

Ces paramètres sont obligatoires avec un backend Python.

• api: URL vers le service (API) du backend Python. Valeur par défaut : api/app.
• user_info: URL vers le service (API) permettant de récupérer les informations de l’utilisateur connecté. Valeur par défaut api/user.
• store_style_service : URL vers le service (API) à utiliser pour sauvegarder un style. Valeur par défaut api/style.
• publish_url : URL de publication à utiliser (par exemple https//public-map/). Si besoin, Apache devra avoir une règle pour orienter cette URL vers le répertoire de publication (voir settings.py - MVIEWERSTUDIO_PUBLISH_PATH).
• public_folder : voir détail plus bas.

Paramètres obligatoires avec PHP

Ces paramètres sont obligatoires avec un backend PHP.

• php : Ensemble des URLs des services PHP à renseigner

  • upload_service : Service web utilisé avec PHP seulement pour stocker les configurations mviewer créées avec le générateur. Valeur par défaut : srv/store.php. Ne pas oublier d’autoriser l’utilisateur apache à accéder en écriture au répertoire. Il est également possible d’utiliser le service « Doc service » de geOrchestra.
  • delete_service : Service utilisé avec PHP seulement pour supprimer toutes les applications réalisées.
  • list_service : Service utilisé avec PHP seulement pour lister toutes les applications sauvegardées.
  • store_style_service : Service utilisé avec PHP seulement pour sauvegarder un style SLD.

• user_info : url vers service retournant l’identité de la personne connectée.
• is_php : A renseigner obligatoirement avec la valeur "true" avec un backend PHP. Il permet d’adapter le frontend mviewerstudio aux fonctionnalités compatibles PHP.

Notes de migration

Passer de v3.9.x à v4

La version 4 de mviewerstudio propose un nouveau backend Python afin de disposer d’un système de stockage et de versionnement des configurations. Le stockage est notamment possible par organisation (seulement compatible security-proxy geOrchestra pour la version 4).

Un utilisateur d’une organisation A ne pourra également pas modifier une carte qui ne lui appartient pas. Il pourra cependant voir toutes les cartes des utilisateurs du même organisme. Si vous ne disposez pas de système d’authentification, cette version propose par défaut d’inclure tous les utilisateurs (dit Anonymes) dans un groupe Public (nom modifiables dans les paramètres).

Pour avoir une vision détaillée des nouveautés, nous vous invitons à consulter la documentation utilisateur et la note de release GitHub.

1. Compatibilité des XML

La version 4 utilise des propriétés et des informations du XML rajoutées par le backend Python de mviewerstudio v4. Ces XML sont notamment versionnés et non dupliqués à chaque modification. Les XML réalisés avec la version de mviewerstudio < 4 ne sont pas compatibles avec le backend Python de la v4.

2. Choix du backend

Le backend PHP reste toutefois utilisable et identique à la version 3.9.x sans nouveautés. Vos XML seront réutilisables en l’état. Si vous n’utiliser pas le backend Python, notez alors que vous ne pourrez pas disposer des dernières nouveautés telles que le versionnement, la publication ou encore le générateur de template.

3. Migrer vos XML manuellement

Si vous souhaiter utiliser le backend Python, mais que vous désirez conserver vos XML, il sera nécessaire de les réimporter unitairement en ouvrant le XML Depuis un ordinateur. Vous devrez donc ouvrir le fichier afin de le re sauvegarder avec les informations nécessaires pour le bon fonctionnement de la v4.

Documentation contributeur

Cette partie est dédiée aux personnes qui ont vocation à contribuer au code mviewerstudio. Mviewerstudio ayant un mécanisme similaire à mviewer, elle renvoie vers la documentation mviewer.

Auteurs et licence

Cette documentation a été réalisée par l’équipe « mviewer » (Région Bretagne).

Sauf indication contraire, cette documentation est sous licence Creative Commons Attribution - Non Commercial - ShareAlike 4.0 (CC-BY-NC-SA).