Change the pictogramm of the cadastrapp plugin

[MaelREBOUX]

We need to change the icon which appears in the side bar. The current is not appropriate.

But we don't understand which version of the glyphicons library is used.

Any idea @offtherailz @Gaetanbrl

To link to sigrennesmetropole/geor_urbanisme_mapstore#59

[Gaetanbrl]

FA v 4.7 seems correct.

https://github.com/georchestra/mapstore2-cadastrapp/blob/master/index.html#L88

[MaelREBOUX]

For Urbanisme plugin : yes. But for me here (cadastrapp) it is the glyphicon library which i used I think.

Could you confirm that @Gaetanbrl ?

[landryb]

FA v 4.7 seems correct.

https://github.com/georchestra/mapstore2-cadastrapp/blob/master/index.html#L88

not certain about that, from my understanding glyphicon is used.. but the current icon doesnt match any of https://getbootstrap.com/docs/3.4/components/.

if i get it right, the glyph currently used is referenced in 3 places:

• as a parameter in https://github.com/georchestra/mapstore2-cadastrapp/blob/master/assets/index.json#L5, used in https://github.com/georchestra/mapstore2-cadastrapp/blob/master/js/extension/plugins/cadastrapp/toolbar/TButton.jsx#L22
• hardcoded as "th" in two places in https://github.com/georchestra/mapstore2-cadastrapp/blob/master/js/extension/plugins/Extension.jsx#L50 and below.

i think FA is used for other icons..

[offtherailz]

Hi.
In recent MapStore the set of icons is custom for the default theme, derived from bootstrap glyphicons:

https://github.com/geosolutions-it/MapStore2/blob/master/web/client/themes/default/icons.less

The icons reflect this set of svg files.
https://github.com/geosolutions-it/MapStore2/tree/master/web/client/themes/default/svg

Font-awsome is included to give support for icons in annotations. Is not used for buttons, so you may need use an element like the following:

<i className={`fa fa-university`}/>

and you may need to customize also style to properly set dimensions and colors.

Note: I'm away this week for FOSS4G (and tobia is out too for annual leave).

[Gaetanbrl]

<i className={fa fa-university}/>

Already tested for urbamap and works fine for me with Font Awesome 4.7 :

icon: <i className={"fa fa-folder-open"} style={{fontSize: "20px"}} />,

[MaelREBOUX]

Well if we want to do that in a clean way we need to create a custom SVG file and host it in mapstore2 web/client/themes/default/svg/ folder. Right ?

But as it is a plugin svg file : where to store it in the plugin repository ? Is it possible to "call" it in the code ?

[jusabatier]

Here is a nice SVG icon : https://www.onlinewebfonts.com/icon/425559

It's free, If I understand we just have to credit them in the README for the icon.

[Gaetanbrl]

But as it is a plugin svg file : where to store it in the plugin repository ? Is it possible to "call" it in the code ?

From MapStoreExtension repo :

You can add to your extension only css, js and png, jpg, gif image files (other than translations folder and index.json). Future improvements could allow to add other assets types(icons, fonts, json ...)

In order to keep your changes as much self contained as possible we suggest to put all your code (and assets) in js/extension/. (Put css in js/extension/assets/, etc...)

...And from the doc :

assets folder, that contains additional bundles (js, css) came out from the bundle compilation. All additional files (js chunks, css ...) must stay in this folder.

So, i guess we can insert a new custom content (as PNG icon) in assets or /js/extension folder.

Next, the new icon could be called as classic file with something like :

import  mySVG from "@js/.../mySVG.svg"

...
 <div>
    <img src={mySVG } alt="React Logo" />
 </div>
...

(Not sur about the correct syntax but not so far ?)

[Gaetanbrl]

Reply to me

(Not sur about the correct syntax but not so far ?)

this works.

1. add SVG to /js/sxtension/assets

... to get a full path like cadastrapp\js\extension\assets\test.svg

2. import SVG

import test from "../assets/test.svg";

3. use it as Icon

icon: <img src={ test } />,

4. See the result

[Gaetanbrl]

@MaelREBOUX @offtherailz in recent extension template (v2023) we can't use icon anymore.

Ref geosolutions-it/MapStoreExtension#58

I'd also tried this notation and the result is the same (not works) :

#175 (comment)

Font-awsome is included to give support for icons in annotations. Is not used for buttons, so you may need use an element like the following:
<i className={fa fa-university}/>

Test :

containers: {
    SidebarMenu: {
        name: CONTROL_NAME,
        position: 10,
        text: "sample",
        icon: <i className={`fa fa-university`}/>
        doNotHide: true,
        action: toggleControl.bind(null, CONTROL_NAME, null),
        priority: 1
    }
}

[Gaetanbrl]

This code works with React import (wrong copy/past)

import React from "react";

containers: {
    SidebarMenu: {
        name: CONTROL_NAME,
        position: 10,
        text: "sample",
        icon: <Glyphicon glyph="th" />
        doNotHide: true,
        action: toggleControl.bind(null, CONTROL_NAME, null),
        priority: 1
    }
}

[offtherailz]

In fact it worked for me in the extensions version 2023.01.xx, also with fa-icon (you just need to put SidebarMenu instead of BurgerMenu in localConfig.json). The icon looks a little smaller, but maybe it can be adjusted with some css

[Gaetanbrl]

What do you think about this cadastrapp new icon (offer by @Agath21) @landryb @pierrejego @MaelREBOUX @jusabatier ?

[landryb]

cc @MarieSuet

[Gaetanbrl]

Or this :

[MarieSuet]

Thank you @Gaetanbrl ! I think the first icon is good, but maybe it's missing a little something... add some plots to the layers under the house, if possible ? example (vertically):
Just a suggestion :) but maybe it overloads the icon...

[Gaetanbrl]

I don't have any preference.
@Agath21 ?

[Agath21]

@MarieSuet Good idea, like that ? I removed a layer to avoid overloading icon.

[pierrejego]

Thanks @Agath21,
it's look like a "homepage" button perhaps no round around the house ?

[MarieSuet]

Thank you, yes, I think it's very good like that, more meaningful (but it's only my opinion) !

[MaelREBOUX]

We approve at Rennes.

[LPoin]

In PR here