.. _ref_ms2_project_customizations: Customization ============================== This section will show you some levels of customizations that could be applied to a MapStore project. The aim of the section is to update the homepage with new logos, descriptions and banner: .. figure:: ../img/custom-project-homepage.png :alt: MapStore homepage with a custom text and translations CSS ----------------- All the CSS rules applied in a MapStore application can be overridden with a new custom CSS file. These steps shows how it's possible to update the ``js/app.jsx`` entry to use a ``custom.css``. This custom.css file should be use for simple customization eg: the homepage banner image. - make a new ``assets/css`` folder .. code-block:: sh mkdir -p assets/css - create a new ``custom.css`` file .. code-block:: sh touch assets/css/custom.css - add some css selector to override the rule in MapStore used to apply the image in the banner description .. code-block:: css .page-maps .ms-home-description { /* change the background image */ background-image: url('../img/training-background.jpg') !important; } .page-maps .ms-home-description .container { /* change the overlay container color */ background-color: rgba(255, 255, 255, 0.3) !important; /* change the minimum height of the jumbotron container */ /* min-height: 250px; */ } - make an img folder in the assets .. code-block:: sh mkdir -p assets/img - copy this image in assets/img folder .. figure:: ../img/training-background.jpg :alt: background image for the MapStore jumbotron original source https://unsplash.com/photos/Fm95IBf5buw - import the custom.css in the ``js/app.jsx`` file .. code-block:: diff import { checkForMissingPlugins } from '@mapstore/utils/DebugUtils'; import main from '@mapstore/product/main'; const ConfigUtils = require('@mapstore/utils/ConfigUtils').default; + import '../assets/css/custom.css'; localConfig.json ----------------- The localConfig.json is the main static configuration file of MapStore. This files allows to modify the configuration of plugins and we could take advantages of this to update some logos, components and text of the homepage. - make a copy of the default localConfig inside the project .. code-block:: sh cp -a MapStore2/web/client/configs/localConfig.json configs/localConfig.json - update main entry point of the app ``js/app.jsx`` to use the project ``localConfig.json`` file .. code-block:: diff - ConfigUtils.setLocalConfigurationFile('MapStore2/web/client/configs/localConfig.json'); + ConfigUtils.setLocalConfigurationFile('configs/localConfig.json'); - save this logo in the assets/img folder .. figure:: ../img/training-mapstore-logo.png :width: 64 :alt: MapStore logo - change the configuration for all the "Attribution" plugins in the configs/localConfig.json to make them use the new logo .. code-block:: diff - "Attribution" + { + "name": "Attribution", + "cfg": { + "src": "assets/img/training-mapstore-logo.png" + } + } - save this footer image in the assets/img folder .. figure:: ../img/training-mapstore-footer.png :width: 140 :alt: MapStore text - change the configuration for all the "Footer" plugins in the configs/localConfig.json to make them use the new footer logo image .. code-block:: diff - "Footer" + { + "name": "Footer", + "cfg": { + "logo": { + "src": "assets/img/training-mapstore-footer.png", + "width": 140, + "height": "auto" + } + } + } - change the "name" configuration for the "HomeDescription" plugins in the ``configs/localConfig.json`` in this way the title in the homepage will be updated .. code-block:: diff - "HomeDescription", + { + "name": "HomeDescription", + "cfg": { + "name": "MapStore Training" + } + } - remove plugins related to the default product such as "Fork" .. code-block:: diff "maps": [ ... - "Fork" Note: other changes could be applied to customize the project, please refer to the official documentation for additional information https://mapstore.readthedocs.io/en/latest/ Translations ----------------- New translations file can be added to a project to use new messages or to overrides translations provided by default by MapStore. - remove all languages from ``configs/localConfig.json`` but english and italian to simplify the step of the training .. code-block:: diff "locales": { "supportedLocales": { "it": { "code": "it-IT", "description": "Italiano" }, "en": { "code": "en-US", "description": "English" + } - }, - "fr": { - "code": "fr-FR", - "description": "Français" - }, - "de": { - "code": "de-DE", - "description": "Deutsch" - }, - "es": { - "code": "es-ES", - "description": "Español" - } - } } - create a new translations directory in the project folder .. code-block:: sh mkdir translations/ - create two files for the english and italian translations .. code-block:: sh touch translations/data.en-US.json .. code-block:: sh touch translations/data.it-IT.json - add to the translations file the messages we want override in this case the home descriptions .. code-block:: json { "locale": "en-US", "messages": { "home": { "shortDescription": "My custom MapStore GeoPortal", "footerDescription": "MapStore training" } } } .. code-block:: json { "locale": "it-IT", "messages": { "home": { "shortDescription": "Il mio GeoPortale MapStore personalizzato", "footerDescription": "MapStore training" } } } - update main entry point of the app ``js/app.jsx`` to use the project translations .. code-block:: diff - ConfigUtils.setConfigProp('translationsPath', './MapStore2/web/client/translations'); + ConfigUtils.setConfigProp('translationsPath', ['./MapStore2/web/client/translations', './translations']); Printing module ----------------- It is possible to change some parts of the final printed map such as the header and the north arrow by changing the default file with new ones, below an example: - replace the ``backend/resources/printing/print_header.png`` image with this to change the layout header .. figure:: ../img/print_header.png :alt: Printing header - replace the ``backend/resources/printing/Arrow_North_CFCF.svg`` image with this to change the north arrow on the printed map .. figure:: ../img/Arrow_North_CFCF.svg :width: 64 :alt: Simple north arrow - printed map with new banner and north arrow .. figure:: ../img/custom-print.png :alt: Printed map with new banner and north arrow A new ``.war`` build is needed to get this new images inside the webapp. It is also possible to manually change the file inside the ``webapp/mapstore/printing`` directory for testing purposes.