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.

Construire son application¶

Deux choix sont offerts à l’utilisateur :

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

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

Etapes de création¶

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 ou de prévisualiser son projet tout le long de son 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é 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 »).
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 mesures : cette option permet d’activer des outils de mesures de distance ou 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/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.

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.

Interdire la navigation hors de l'étendue définie ci-dessus : bloque l’emprise de la carte sur l’emprise définie mode avancé.

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é.

Recherche (mode avancé)¶

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¶

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

Afficher la page d'accueil par défaut mode avancé: affiche la page d’accueil au lancement de l’application.

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 :

Créer : pour créer votre thématique et y associer vos jeux de données « métier »

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 une thématique¶

En cliquant sur Importer, possibilité d’importer une·des thématique·s existante·s (voir option external_themes dans Configurer mviewerstudio).

Paramétrer ses données¶

Il est ensuite nécessaire d’ajouter des données à cette thématique via le bouton .

Ajouter une donnée¶

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

Une fois cliqué sur Séléctionner, 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.
Attributions : 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.
Styles disponibles : choix du·des style·s de la donnée dans notre application. Possibilité d’éditer le libellé du style.

Onglet Interrogation¶

L’onglet interrogation recense les options relatives à l’interrogation de la donnée.

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.
mode avancé Limitation du nombre de réponses : limitation du nombre d’entités interrogées.
Format de la fiche d'information : personnalisation possible de la fiche d’information.
- Choix du type : titre, texte, lien ou image.
- Choix du label
- Choix de l’ordre d’affichage dans la fiche d’information

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. mode avancé

mode avancé Echelle mini / maxi : Echelle minimale et maximale d’affichage de la donnée.
mode avancé Légende statique : Lien vers une image qui s’affiche en tante que légende de la donnée.
mode avancé Affichage tuilé : Affichage tuilé de la donnée. La donnée est chargée progressivement.
mode avancé Utiliser un style externe : Lien vers un style SLD remplaçant le style du serveur cartographique.
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. 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. mode avancé

3) Publier son application¶

La configuration de votre application est terminée. Vous pouvez télécharger le fichier XML pour publication en production ou prévisualiser le résultat.

Documentation technique¶

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

Installer mviewerstudio¶

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…

mviewerstudio peut fonctionner avec 2 backends différents

PHP
Python

En fonction du backend retenu, l’installation diffère.

Backend PHP¶

Prérequis : Apache 2, PHP 7

Clone du projet dans le répertoire apache :

git clone https://github.com/mviewer/mviewerstudio

Backend Python¶

à compléter…

Docker¶

à compléter…

Configurer mviewerstudio¶

La configuration s’effectue dans le fichier config.json (à créer à partir d’une copie de config-sample.json).

Structure du fichier de configuration¶

 {
         "app_conf": {
                 "studio_title": "GéoBretagne mviewer studio",
                 "upload_service": "srv/store.php",
                 "delete_service": "srv/delete.php",
                 "list_service": "srv/list.php",
                 "store_style_service": "srv/store/style.php",
                 "mviewer_instance": "http://172.16.10.30/mviewer/",
                 "conf_path_from_mviewer": "apps/store/",
                 "mviewer_short_url": {
                         "used": true,
                         "apps_folder": "store"
                 },
                 "external_themes": {
                         "used": false,
                         "url": "https://geobretagne.fr/minicatalog/csv"
                 },
                 "user_info": "srv/user_info.php",
                 "export_conf_folder": "/var/www/htdocs/mviewer/apps/store/",
                 "proxy": "../proxy/?url=",
                 "user_info_visible": false,
                 "app_form_placeholders": {
                         "app_title": "Kartenn",
                         "logo_url": "https://geobretagne.fr/pub/logo/region-bretagne.jpg",
                         "help_file": "mviewer_help.html"
                 },
                 "map": {
                         "center": [-307903.74898791354, 6141345.088741366],
                         "zoom": 7
                 },
                 "baselayers": {
                         "positron": {
                                 "id": "positron",
                                 "thumbgallery": "img/basemap/positron.png",
                                 "title": "CartoDb",
                                 "label": "Positron",
                                 "type": "OSM",
                                 "url": "https://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
                                 "attribution": "Map tiles by  <a href=\"https://cartodb.com/attributions\">CartoDb</a>, under  <a href=\"https://creativecommons.org/licenses/by/3.0/\">CC BY 3.0 </a>"
                         },
                         "ortho1": {
                                 "id": "ortho1",
                                 "thumbgallery": "img/basemap/ortho.jpg",
                                 "title": "GéoBretagne",
                                 "label": "Photo aérienne actuelle",
                                 "type": "WMTS",
                                 "url": "https://tile.geobretagne.fr/gwc02/service/wmts",
                                 "layers": "satellite",
                                 "format": "image/png",
                                 "style": "_null",
                                 "matrixset": "EPSG:3857",
                                 "fromcapacity": "false",
                                 "attribution": "<a href=\"https://geobretagne.fr/geonetwork/srv/fre/catalog.search#/metadata/3a0ac2e3-7af1-4dec-9f36-dae6b5a8c731\" target=\"_blank\" >partenaires GéoBretagne - Megalis Bretagne - IGN - PlanetObserver</a>"
                         },
                         "osm": {
                                 "id": "osm",
                                 "thumbgallery": "img/basemap/osm.png",
                                 "title": "OSM",
                                 "label": "OpenStreetMap",
                                 "type": "OSM",
                                 "url": "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                                 "attribution": "Données : les contributeurs d'<a href=\"https://www.openstreetmap.org/\" target=\"_blank\">OpenStreetMap </a><a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\">ODbL </a>"
                         },
                         "plan_ign": {
                                 "id": "plan_ign",
                                 "thumbgallery": "img/basemap/scan-express.jpg",
                                 "title": "IGN",
                                 "label": "Plan IGN v2",
                                 "type": "WMTS",
                                 "url": "https://wxs.ign.fr/choisirgeoportail/geoportail/wmts?",
                                 "layers": "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2",
                                 "format": "image/png",
                                 "fromcapacity": "false",
                                 "attribution": "<a href='https://geoservices.ign.fr' target='_blank'><img src='https://geoservices.ign.fr/images/logoIGN.png'></a>",
                                 "style": "normal",
                                 "matrixset": "PM",
                                 "maxzoom": "22"
                         }
                 },
                 "data_providers": {
                         "csw": [{
                                         "title": "Catalogue GéoBretagne",
                                         "url": "https://geobretagne.fr/geonetwork/srv/fre/csw",
                                         "baseref": "https://geobretagne.fr/geonetwork/srv/eng/catalog.search?node=srv#/metadata/"
                                 },
                                 {
                                         "title": "Catalogue de la Région Grand Est",
                                         "url": "https://www.geograndest.fr/geonetwork/srv/fre/csw",
                                         "baseref": "https://www.geograndest.fr/geonetwork/srv/eng/catalog.search?node=srv#/metadata/"
                                 }
                         ],
                         "wms": [{
                                 "title": "Serveur WMS de la Région",
                                 "url": "https://ows.region-bretagne.fr/geoserver/rb/wms"
                         }]
                 },
                 "default_params": {
                         "layer": {
                                 "info_format": "text/html"
                         }
                 }
         }
 }

Paramètres du fichier de configuration¶

La configuration s’effectue dans le fichier config.json (à créer à partir d’une copie de config-sample.json).

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.
upload_service : Service web utilisé 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 (par exemple ../mapfishapp/ws/mviewer/). Dans ce dernier cas, les fichiers de configuration sont stockés dans la base de données de geOrchestra.
export_conf_folder: Dossier utilisé pour le stockage des fichiers de configuration mviewer générés. Ce paramètre est utilisé si le paramètre précédent est srv/store.php ?srv/store.php.
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).
external_themes : Utilisation du mécanisme d’import de thématiques externes (présentes dans d’autres mviewers).
used : true | false.
url : chemin d’accès vers la liste au format json.
user_info : url vers service retournant l’identiTé de la personne connectée.
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=.
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.

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).

Bienvenue sur la documentation mviewerstudio !¶

Introduction¶

Documentation utilisateur¶

Bien commencer¶

Prérequis¶

Construire son application¶

Etapes de création¶

Modes¶

Crédits¶

1) Paramétrer son application¶

Champs principaux¶

Fonctionnalités¶

Options de la carte¶

Fonds de plan¶

Recherche (mode avancé)¶

Page d’accueil¶

Navigation¶

2) Thématiques & données¶

Paramétrer ses thématiques¶

Option - Créer une thématique¶

Option - Importer une thématique une thématique¶

Paramétrer ses données¶

Ajouter une donnée¶

Onglet Général¶

Onglet Interrogation¶

Onglet filtre dynamique¶

Onglet options avancées¶

Onglet filtre statique¶

Onglet recherche¶

3) Publier son application¶

Documentation technique¶

Installer mviewerstudio¶

Backend PHP¶

Backend Python¶

Docker¶

Configurer mviewerstudio¶

Structure du fichier de configuration¶

Paramètres du fichier de configuration¶

Documentation contributeur¶

Auteurs et licence¶