Customize home page and viewer

[Jorge Torres]

Hi,

I would like to customize the home page and some parts of the viewer. I know that many options can be changed in the localConfig.json, but I cannot find the way to do this:

1.change the text in the body of the homepage

2. the banner (header image)

3. the text in the footer

4. the geosolutions logos in the page

5. I would like to insert a small hearder into the viewer at the top with a logo

6. change the icons in the viewer

When are you expecting to release the new version? 2018.02 

has the last nightly version soleved the problem with saving maps?, due to the SRS amount

Thanks a lot

[Jorge Torres]

Anyone to help please?

[Mauro Bartolomeoli]

Hi Jorge,

2018-05-13 18:57 GMT+02:00 Jorge Torres <jtorr...@gmail.com>:

Hi,

I would like to customize the home page and some parts of the viewer. I know that many options can be changed in the localConfig.json, but I cannot find the way to do this:

1.change the text in the body of the homepage

All the text should be changed using translation files. For example, for english, have a look here: https://github.com/geosolutions-it/MapStore2/blob/master/web/client/translations/data.en-US#L158

In the home section you should find (almost) all the text used by the homepage.

Let us know if you miss anything.

 

2. the banner (header image)

This can be done using css, this is the selector: .page-maps .ms-home-description

 

3. the text in the footer

To customize the footer you have to replace the standard Footer plugin (https://github.com/geosolutions-it/MapStore2/blob/master/web/client/product/plugins/Footer.jsx) with your own.

If you need some documentation to build / configure your own plugin, start from here: https://dev.mapstore.geo-solutions.it/mapstore/docs/plugins-architecture

 

4. the geosolutions logos in the page

You have to customize the Attribution plugin. This is an example (in localConfig.json):

"plugins": {

"common": [

...

{

            "name": "Attribution",

            "cfg": {

                "src": "https://www.google.it/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png",

                "href": "https://www.google.it",

                "label": "Google"

            }

        },

...

]

}

 

5. I would like to insert a small hearder into the viewer at the top with a logo

Depending on the header content, there can be different ways to do this. Probably you should create your own plugin for the header, add it to the plugins.js file, configure it in localConfig.json and play a bit with css to let the other tools "move" down into the page and leave the space for the header.

 

6. change the icons in the viewer

Icons are implemented using a custom font (mapstore2) and css styles to assign a particular char to each button (using the glyph icons technique).

You can either customize the font (or replace it with your own) or play with css to use images (or sprites) instead of fonts.

 

When are you expecting to release the new version? 2018.02 

I will let other people more aware of the release plans answer this one.

 

has the last nightly version soleved the problem with saving maps?, due to the SRS amount

Yes, this has been solved. 

--

Regards,

Mauro Bartolomeoli

==
GeoServer Professional Services from the experts! Visit http://goo.gl/it488V for more information.
==

Dott. Mauro Bartolomeoli
@mauro_bart
Technical Lead

GeoSolutions S.A.S.
Via di Montramito 3/A
55054  Massarosa (LU)
Italy
phone: +39 0584 962313
fax:      +39 0584 1660272

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

-------------------------------------------------------

AVVERTENZE AI SENSI DEL D.Lgs. 196/2003

Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.

The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.

[Jorge Torres]

Hi Mauro,

Thanks a lot for taking the time to answer

All the text should be changed using translation files. For example, for english, have a look here: https://github.com/geosolutions-it/MapStore2/blob/master/web/client/translations/data.en-US#L158

In the home section you should find (almost) all the text used by the homepage.

Let us know if you miss anything.

Yes, simple thing, The word MapStore in the header, I cannot find it un the translation files, I guess it is somewhere common to all pages. I am using the latest build, so I am using the dev version

by the way, I dont see the theme nor the viewer selector in the dev version´s home page, are you planning to deprecate that? (leaflet?), the new maps are opening only with openlayers

This can be done using css, this is the selector: .page-maps .ms-home-description

Everyhing in the default.css file?

Icons are implemented using a custom font (mapstore2) and css styles to assign a particular char to each button (using the glyph icons technique).
You can either customize the font (or replace it with your own) or play with css to use images (or sprites) instead of fonts.

Are these in the docs/fonts folder?

Thanks 

Jorge

[Mauro Bartolomeoli]

Hi Jorge,

2018-05-16 21:57 GMT+02:00 Jorge Torres <jtorr...@gmail.com>:

Hi Mauro,

Thanks a lot for taking the time to answer

All the text should be changed using translation files. For example, for english, have a look here: https://github.com/geosolutions-it/MapStore2/blob/master/web/client/translations/data.en-US#L158

In the home section you should find (almost) all the text used by the homepage.

Let us know if you miss anything.

Yes, simple thing, The word MapStore in the header, I cannot find it un the translation files, I guess it is somewhere common to all pages. I am using the latest build, so I am using the dev version

That one is somewhat "special", it can be configured in localConfig.json through a property of the HomeDescription plugin.

{

   "name": "HomeDescription",

   "cfg": {

       "name": "MyPortal"

   }

}

 

by the way, I dont see the theme nor the viewer selector in the dev version´s home page, are you planning to deprecate that? (leaflet?), the new maps are opening only with openlayers

Not of my knowledge, or at least, I hope this is not going to happen. We have just removed those two widgets from the home of the standard product.

You can have them back adding the related plugins to localConfig.json in the "maps" section:

"maps": [

    ...

    "ThemeSwitcher", "MapType",

    ...

]

 

In addition, we now  ave an automatic choice for the mapping library: openlayers on the desktop and leaflet on mobile, but you can always open a map in either one, changing the url: 

http://localhost:8081/#/viewer/leaflet/<mapId>

This can be done using css, this is the selector: .page-maps .ms-home-description

Everyhing in the default.css file?

For simple customizations, you can do overrides in the files in this folder: https://github.com/geosolutions-it/MapStore2/tree/master/web/client/product/assets/css

 

Icons are implemented using a custom font (mapstore2) and css styles to assign a particular char to each button (using the glyph icons technique).
You can either customize the font (or replace it with your own) or play with css to use images (or sprites) instead of fonts.

Are these in the docs/fonts folder?

You can find it in various formats here: https://github.com/geosolutions-it/MapStore2/tree/master/web/client/themes/default/icons

We use the following tools:

 - InkScape (https://inkscape.org/it/), but you can use any tool able to export an svg

 - FontForge (https://fontforge.github.io/en-US/) to import the icon(s) in the font file (usually we start from the ttf one and then using this tool we export the other formats, except for eot)

 - TTF2EOT (https://github.com/fontello/ttf2eot) to convert in EOT format too

Here you will find examples of css to bind a classname to a font char: https://github.com/geosolutions-it/MapStore2/blob/master/web/client/themes/default/icons.less#L62

[Simone Giannecchini]

Ciao Jorge,

about next release, we are working on it at full speed.

There is a good number of new features, hence I would say end of June to account for some good testing.

Regards,
Simone Giannecchini

==
GeoServer Professional Services from the experts!
Visit http://goo.gl/it488V for more information.
==

Ing. Simone Giannecchini
@simogeo
Founder/Director

GeoSolutions S.A.S.
Via di Montramito 3/A
55054  Massarosa (LU)
Italy
phone: +39 0584 962313
fax:     +39 0584 1660272

mob:   +39  333 8128928

http://www.geo-solutions.it
http://twitter.com/geosolutions_it

-------------------------------------------------------
AVVERTENZE AI SENSI DEL D.Lgs. 196/2003
Le informazioni contenute in questo messaggio di posta elettronica e/o nel/i file/s allegato/i sono da considerarsi strettamente riservate. Il loro utilizzo è consentito esclusivamente al destinatario del messaggio, per le finalità indicate nel messaggio stesso. Qualora riceviate questo messaggio senza esserne il destinatario, Vi preghiamo cortesemente di darcene notizia via e-mail e di procedere alla distruzione del messaggio stesso, cancellandolo dal Vostro sistema. Conservare il messaggio stesso, divulgarlo anche in parte, distribuirlo ad altri soggetti, copiarlo, od utilizzarlo per finalità diverse, costituisce comportamento contrario ai principi dettati dal D.Lgs. 196/2003.
 
The information in this message and/or attachments, is intended solely for the attention and use of the named addressee(s) and may be confidential or proprietary in nature or covered by the provisions of privacy act (Legislative Decree June, 30 2003, no.196 - Italy's New Data Protection Code).Any use not in accord with its purpose, any disclosure, reproduction, copying, distribution, or either dissemination, either whole or partial, is strictly forbidden except previous formal approval of the named addressee(s). If you are not the intended recipient, please contact immediately the sender by telephone, fax or e-mail and delete the information in this message that has been received in error. The sender does not give any warranty or accept liability as the content, accuracy or completeness of sent messages and accepts no responsibility  for changes made after they were sent or for other risks which arise as a result of e-mail transmission, viruses, etc.

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

[Jorge Torres]

Hi Mauro, 

Thanks a lot for your help, all OK and working

But after updating to the latest build I am having these issues:

1. The Add Dashboard disappeared, only the Add Map appears

2 After Adding

"maps": [

    ...

    "ThemeSwitcher", "MapType",

    ...

]

The contols show up, but not in the same place as before, they are mislocated in the page

3. I cannot find the path: For simple customizations, you can do overrides in the files in this folder: https://github.com/geosolutions-it/MapStore2/tree/master/web/client/product/assets/css

    nor the path where Footer.jsx is located

Is this because they are coming in the source code not in the built version?, so in order to change the CSS and the footer I have to download the code and build my own application?

What is going on?

***************

[Lorenzo Natali]

Hi,

1) We already noticed and fixed the issue. In the next build the problem will be fixed. 

2) We removed theme switcher and layer selector and we will not support them for the new home page. At least until they will be included in the new design. 

Please take into account that using the nightly build can cause this kind of issues (expecially the 1st, because you're using features that are still in development). 

You should use the latest release if you need stable features

--
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-users+unsubscribe@googlegroups.com.
To post to this group, send email to mapstore-users@googlegroups.com.

[raghuram]

Hi,

I want to change the below content in the header... how to do that one.... anybody can help ...??

Modern webmapping with OpenLayers, Leaflet and ReactJS.
Visit the documentation page

Regards,

RAM

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.

[Tobia Di Pisa]

Hi Ram,

I think you can find what you need in our online training documentation.

Regards,

     Tobia Di Pisa

To view this discussion on the web visit https://groups.google.com/d/msgid/mapstore-users/951a8901-9776-4580-b6d4-ff473708a6den%40googlegroups.com.

--

==
GeoServer Professional Services from the experts!

Visit http://bit.ly/gs-services-us for more information.
==
Dott. Ing. Tobia Di Pisa
Technical Lead / Project Manager

GeoSolutions Group
phone: +39 0584 962313

mobile: +39 340 1781783
fax:      +39 0584 1660272

https://www.geosolutionsgroup.com/
http://twitter.com/geosolutions_it
-------------------------------------------------------

Con riferimento alla normativa sul trattamento dei dati personali (Reg. UE 2016/679 - Regolamento generale sulla protezione dei dati “GDPR”), si precisa che ogni circostanza inerente alla presente email (il suo contenuto, gli eventuali allegati, etc.) è un dato la cui conoscenza è riservata al/i solo/i destinatario/i indicati dallo scrivente. Se il messaggio Le è giunto per errore, è tenuta/o a cancellarlo, ogni altra operazione è illecita. Le sarei comunque grato se potesse darmene notizia.

This email is intended only for the person or entity to which it is addressed and may contain information that is privileged, confidential or otherwise protected from disclosure. We remind that - as provided by European Regulation 2016/679 “GDPR” - copying, dissemination or use of this e-mail or the information herein by anyone other than the intended recipient is prohibited. If you have received this email by mistake, please notify us immediately by telephone or e-mail.

[raghuram]

Hi Tobia Di Pisa,

Thanks a lot for your help...

Regards,

RAM

[raghuram]

Hi Tobia Di Pisa,

1. Unfortunately, I cannot find the exact file associated with the below content in the documentation/ plugins directory in my mapstore.

The only content I want to change is my own…

Modern webmapping with OpenLayers, Leaflet and ReactJS.

Visit the documentation page

Could you please let me know the exact file name and the path to the file.

2.In order to print the maps, I would like the print option enabled... Could you please tell me how to enable the print option in mapstore.

Thanks & Regards,

RAM

[Lorenzo Natali]

Hi, 

in the /translations/ folder (of product or projects, depending on your needing), you can find (put in case of projects) for every language supported a file, eg en-US.json. 

The file contains all the localized strings 

The specific string you asked is located, for isntance, in messages  --> home --> shortdescription

For the printing module, you can find instructions here. 

https://docs.mapstore.geosolutionsgroup.com/en/latest/developer-guide/printing-module/

For projects, adding translations and printing modules is explained here:

• translations: https://training.mapstore.geosolutionsgroup.com/project/customization/index.html#translations
• printing: https://training.mapstore.geosolutionsgroup.com/project/customization/index.html#printing-module