umap-project / umap

uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site.
https://umap-project.org
Other
1.19k stars 226 forks source link

Change the pictograms used : to manage layers / change the map background #1165

Closed Aurelie-Jallut closed 1 year ago

Aurelie-Jallut commented 1 year ago

The two current pictograms are incomprehensible and do not represent their function.

I propose 2 more understandable pictograms

image

We'll have to see if the picto library we're using includes these: map-fill stack-fill

yohanboniface commented 1 year ago

We are not using any library for UI pictograms (OSM fr uses pictos from Maki/Nori/Osmic for user to add in markers, though).

So either you have the rights to use those suggested pictograms, either you/I should redraw something similar :)

Our pictograms are in this directory, in *.svg, in 24/16px and black/white:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/

Exemple for the black 24 px ones:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/24.svg

Would you update those files or should I ? :)

davidbgk commented 1 year ago

@Aurelie-Jallut we did not talk about it (yet!) but there is a proposal here about making labels more explicit too.

Aurelie-Jallut commented 1 year ago

We can use those from the https://remixicon.com/ and see if they don't clash too much with the others.

image

Aurelie-Jallut commented 1 year ago

We are not using any library for UI pictograms (OSM fr uses pictos from Maki/Nori/Osmic for user to add in markers, though).

So either you have the rights to use those suggested pictograms, either you/I should redraw something similar :)

Our pictograms are in this directory, in *.svg, in 24/16px and black/white:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/

Exemple for the black 24 px ones:

https://github.com/umap-project/umap/blob/master/umap/static/umap/img/24.svg

Would you update those files or should I ? :) I can try :)

yohanboniface commented 1 year ago

1

Screenshot from 2023-06-23 19-55-14

2

image

3

Screenshot from 2023-06-23 19-52-00

4

Screenshot from 2023-06-23 19-50-57

5

Screenshot from 2023-06-23 19-49-45

6

Screenshot from 2023-06-23 19-48-57

@Aurelie-Jallut about the "background layer icon", pick a number, or I can run the dice again! :)

davidbgk commented 1 year ago

Icons can be pretty confusing, especially in uncommon contexts :)

What about buttons with readable labels: [Search], [Fullscreen], [Share], etc. 🙃

yohanboniface commented 1 year ago

For datalayers:

image

(Retina icons needed…)

(Also better centering, but I'll do this in a later step, because all icons are concerned, due to bad sprit size.)

yohanboniface commented 1 year ago

What about buttons with readable labels: [Search], [Fullscreen], [Share], etc.

Labels can be confusing too: https://fr.wikipedia.org/wiki/Facile_%C3%A0_lire_et_%C3%A0_comprendre ;)

davidbgk commented 1 year ago

¿Por que no los dos? 🤷

yohanboniface commented 1 year ago

؟ Porque es un otro ticketto :)

davidbgk commented 1 year ago

More seriously, I can't see an icon representing “changing a map background” that would be explicit at first sight.

yohanboniface commented 1 year ago

Sure!

Plus here we need to distinguish between "background layer" and "data layer", so for new comers it's a real challenge. I guess here the cultural habits should help (doing the same as other applications), and I understand that's what @Aurelie-Jallut is pushing. I'm definitely ok to have some sort of label, but I'd say this should be done in a separate move. And I'll let Aurélie push her views on this :)

yohanboniface commented 1 year ago

For the record, there is a label on hover, using the title attribute, but that indeed may not be enough :)

image

Aurelie-Jallut commented 1 year ago

On the subject of the picto "change the map background"

After a tour of 4 online carto tools, each one does its own thing :

I tried it out

image

I like the last one, I could do a monochrome version

yohanboniface commented 1 year ago

:+1:

Remember that we need it in SVG, and we need both a light and a dark version (if you need the grey tones, tell me, but I guess you don't :) ).

davidbgk commented 1 year ago

I like the last one, I could do a monochrome version

Maybe the last one works because it has common layer colors?

Aurelie-Jallut commented 1 year ago

image

davidbgk commented 1 year ago

The one with colors looks more explicit to me.

yohanboniface commented 1 year ago

Done in #1188

virgile-dev commented 1 year ago

On the subject of the picto "change the map background"

After a tour of 4 online carto tools, each one does its own thing :

* small map in a rounded rectangle

* text

* picto layer

* picto layer with arrow

I tried it out

image

I like the last one, I could do a monochrome version

Hey @Aurelie-Jallut, thanks for pointing out the issue. It's awesome that icons are not pixelised anymore ! My preference goes to the one in the middle as the idea of switching map background is clearer. IMHO having a real map image in such a small icon is not really recognizable. I see the PR was already merged and live in production. I guess we'll see what users have to say ^^