Homepage customisation

Gregory Giuliani

unread,

Sep 20, 2018, 3:34:58 AM9/20/18

to mapstore-users

Dear All,

I have a question regarding the Homepage customisation.

I'm a bit lost and how to modify some of the elements of the homepage.

A picture is worth 1000 words, and I've attached a screen shot with the elements I wish to modify but did not managed to find the corresponding file(s) to edit.

Thanks in advance for your help :-)

Greg

Presentation1.png

Lorenzo Natali

unread,

Sep 20, 2018, 5:25:07 AM9/20/18

to mapstor...@googlegroups.com

Hi Gregory,

MapStore2 is all based on the concept of plugins.

The plugins of the home page are configured in the "maps" section of localConfig.json

You can quickly remove "Fork" and "MailingLists" plugins from the array To remove "fork on github" and mailing lists parts.

See how to customize plugins in the related section of the documentation. Unfortunately there is not any documentation about home plugins yet, so you may need to look at the source code.

I send you some suggestion in order to provide an initial draft of for the future documentation.

For instance to customize the title, looking at the HomeDescriptionPlugin

You can see that this.props.name is the title. As from the documentation you can customize direct plugins props (not managed in the state) by replacing "HomeDescription" string with a json object like this:

{"name": "HomeDescription", "cfg": {"name": "MyApp"}}

For the descripion below the title, you see in the code something like:

<HTML msgId="home.shortDescription"/> // The same is for <Message msgId="..." />

This means that you should customize the localized strings in /translations/data.en_US (or any other locale you want). and look for "home": { "shortDescription": "text to customize"}

In a similar way you can customize the "Attribution" plugin configuration (logo) by setting the image src chaning "Attribution" with the JSON object and setting "src" in "cfg" object. Example:

{"name": "Attribution", "cfg": {"src": "https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"}}

About the navigation links (NavMenu), actually Featured and Content links appear only if you have the "FeaturedMaps" and "ContentTabs" plugins. The links are injected by these plugins, but you can disable this injection using the "hideFrom" property, configuring the 2 plugins like this:

          { "name": "FeaturedMaps", "hideFrom": ["NavMenu"]},
          { "name": "ContentTabs", "hideFrom": ["NavMenu"]},

You can add some custom links if you want, looking at the code, with the same technique, replacing "NavMenu" with something like:

{
          "name": "NavMenu",
          "cfg": {
            "links": [{"label": "test", "href": "http://www.google.com"}]
          }
        }, 

Some plugins are like the "Footer" are instead not customizable, yet. Anyway you can remove it.

More customization may require writing some code.

I hope I did a useful guide for you and for any other user that want to customize the home page, waiting to be able to document it more.

--
You received this message because you are subscribed to the Google Groups "mapstore-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mapstore-user...@googlegroups.com.
To post to this group, send email to mapstor...@googlegroups.com.
Visit this group at https://groups.google.com/group/mapstore-users.
For more options, visit https://groups.google.com/d/optout.

Lorenzo Natali

unread,

Sep 20, 2018, 5:29:01 AM9/20/18

to mapstor...@googlegroups.com

If it wasn't clear, for all the replacements (e.g. when I say -- replace "HomeDescription" with the JSON object --) I always meant that the string to replace are in the "maps" section in "localConfig.json" (except for the localized strings)

Gregory Giuliani

unread,

Sep 20, 2018, 5:46:19 AM9/20/18

to mapstore-users

Thanks a lot Lorenzo for your detailed answer. I'll have a look to it

Greg

Gregory Giuliani

unread,

Sep 20, 2018, 8:38:51 AM9/20/18

to mapstore-users

Hi Again Lorenzo,

I did a try and managed to easily remove the Fork and MailingLists sections.

However, I'm struggling with the HomeDescription.

Attached you can find my localConfig.json file.

Did I something wrong?

Thanks for your appreciated help

Greg

On Thursday, 20 September 2018 11:29:01 UTC+2, Lorenzo Natali wrote:

localConfig.json

Lorenzo Natali

unread,

Sep 20, 2018, 8:54:24 AM9/20/18

to mapstor...@googlegroups.com

Yes,

You had to replace the "HomeDescription" string in the maps:[] array with your JSON configuration (that is a shortcut for -- {name: "HomeDescription", cfg:{}} -- to use the predefined configuration). Your file contains both the old "HomeDescription" and the json object with {name: ...}

Note: order is also important, so you have to replace it in the same place, not to add it below "Maps" configuration.

I attach a sample with the correct change to your localConfig.json.

Hope it helps

localConfig.json

Gregory Giuliani

unread,

Sep 20, 2018, 10:28:07 AM9/20/18

to mapstore-users

Thanks a lot :-) Very much appreciated.

Works very well.

Reply all

Reply to author

Forward