Ce tutoriel concerne la release mapstore2-georchestra contenant au moins la version
Mapstore 2021.02.xx.
L’apparence MapStore2-georchestra utilise un fichier CSS d’afficher les éléments graphiques de MapStore2. On désignera ce fichier (et donc cet ensemble de règles communes à un fichier) comme un theme.
Un thème est donc un ensemble de règles de style CSS qui permettent d’afficher les éléments graphiques de MapStore2.
Pour Mapstore2-georchestra, un thème spécifique a été rajouté pour l’intégration de MapStore2 dans geOrchestra. Nous considéront ce thème comme thème par défaut. Il est disponible ici :
https://github.com/georchestra/mapstore2-georchestra/tree/master/themes/default
Il est donc possible de modifier l’apparence de l’interface en :
Ces prérequis concerne une distribution Linux Debian et permette de compiler un thème depuis les sources.
Pour pouvoir modifier ou créer un thème, vous devez installer :
Vous devez également disposer de :
Il est fortement conseillé de lire les documents suivants avant de commencer :
Avec ces prérequis, nous pourrons réaliser le build de la webapp mapstore2-georchestra, unique étape qui nous intéressera dans ce tutoriel.
De façon générale, les thèmes utilisent des fichiers .less qui devront être compilés au format .css pour être lus par les navigateurs.
Aussi, les fichiers de style .less utilisent d’autres fichiers dont ils sont dépendants. Ces dépendances doivent être accessibles lors de la compilation pour que les feuilles de styles CSS créés soient correctement exploitables (lire la doc less pour plus de détails).
Dans MapStore2-georchestra, l’étape de compilation permettant de compiler les fichiers .less en .css est réalisée lors de la création de la webapp (.war) via le bundler webpack.
Tous les fichiers localisés dans le répertoire /themes du projet seront donc compilés pendant cette étape. Les fichiers .css seront ensuite disponibles au sein de la webapp dans /mapstore/dist/themes :
https://github.com/georchestra/mapstore2-georchestra/blob/50e9e4e2febc27576fa867d74f9e57476fa75ff3/webpack.config.js#L16
Pour résumer :
/mapstore/dist/themes..less des thèmes sont conservés dans la webapp dans /mapstore/themes.Pour modifier un thème comme le thème par défaut (dans themes/default) vous devez accéder aux sources du thème au sein du projet (GitHub) mapstore2-georchestra via le répertoire themes/default :
https://github.com/georchestra/mapstore2-georchestra/tree/master/themes
Ensuite, vous pouvez modifier le fichier variable.less qui contient les règles CSS principales du thème (commence par ms-).
Nous ne conseillons pas de modifier d’autres éléments du thème par défaut. Si vous devez appliquer beaucoup de modifications au sein d’un thème par défaut qui ne vous appartient pas, nous conseillons de créer un nouveau thème et de passer directement à l’étape suivante
Créer un thème.
Pour terminer, vous devez réaliser un build de la webapp avant de la déployer à nouveau sur votre serveur :
cd mapstore2-georchestra
./build.sh [version_identifier]
Enfin, redémarrer le service tomcat si nécessaire :
service [email protected] restart
Vous devriez à présent voir les modifications appliquée sur le thème.
Il n’est pas conseillé de faire le build et seulement déployer les fichiers CSS compilés dans la webapp car un redémarrage du serveur reprendra les sources du .war par défaut et écraserai votre nouvelle configuration sans les fichiers publiés manuellement.
La création d’un thème reprend les étapes de la section
Modifier un thème. Nous rajouterons cependant en étapes la création des sources et la configuration de la webapp pour utiliser un nouveau thème.
Pour créer un nouveau thème nous conseillons de duppliquer un thème existant. Vous pouvez utiliser comme base le thème Dark disponible dans les sources de MapStore2 :
https://github.com/geosolutions-it/MapStore2/tree/c87f5fa9e5e744abc209d7a5e33b4682e22f04d9/web/client/themes/dark
/themes du projet GitHub avec un nom de répertoire différent (nous utiliserons /themes/foo avec le nom de thème foo)./themes/foo/variable.less comme indiqué dans la section précédente Modifier un thème.cd mapstore2-georchestra
./build.sh
service tomcat-georchestra restart
Sur votre serveur, vous devriez avoir maintenant les fichiers de votre nouveau thème dans dans la webapp au sein du répertoire /mapstore/dist/themes/foo.
La configuration permet de :
/mapstore/#/Pour choisir le thème par défaut, vous devez ouvrir le fichier localConfig.json (localisé dans <datadir>/mapstore/configs/localConfig.json).
Identifier dans le fichier la configuration de l’état par défaut defaultState et rajouter le theme par défaut en utilisant comme ID le nom du fichier css de votre theme (localisé dans /dist/themes/foo/foo.css):
"initialState": {
"defaultState": {
"theme":{
"selectedTheme":{
"id": "foo"
}
},
Accéder à votre carte par défaut pour voir la modification : <my.georchestra.fr>/mapstore/#/
Pour gérer la liste des thèmes disponibles à la création ou modification d’un contexte, vous devez ouvrir le fichier localConfig.json (localisé dans <datadir>/mapstore/configs.localConfig.json).
Identifier la configuration du contexteCreator qui doit être par défaut :
{
"name": "ContextCreator",
"cfg": {
"documentationBaseURL": "https://mapstore.geo-solutions.it/mapstore/docs/api/plugins",
"saveDestLocation": "/admin",
"backToPageDestRoute": "/admin"
}
},
Rajouter le thème par défaut et le nouveau thème foo à la liste des themes comme ceci (à adapter selon votre configuration initiale):
{
"name": "ContextCreator",
"cfg": {
"documentationBaseURL": "https://mapstore.geo-solutions.it/mapstore/docs/api/plugins",
"saveDestLocation": "/admin",
"backToPageDestRoute": "/admin",
"themes":[
{"id":"foo","type":"link","href":"dist/themes/foo.css"},
{"id":"default","type":"link","href":"dist/themes/default.css"}
]
}
},
Créer maintenant un nouveau thème (ou modifier un contexte existant). La dernière étape Thème vous proposera mainetnant de choisir le thème foo.
http://docs.georchestra.geo-solutions.it/en/latest/developer/index.html
https://mapstore.readthedocs.io/en/latest/developer-guide/requirements/