Add POI category icons & color

[svenseeberg]

Motivation

The app will use colors and icons for displaying POIs as rain drops on the map.

Proposed Solution

Our POI category model needs new color and icon attribute. The form needs to have a field for this as well. Adding raw RGB color codes would be okay, a color picker is not required.

The POI API endpoint needs to return the categoory (already implemented) and a new attribute category_color & category_icon. The color should be the RGB code, the category_icon should contain a path to an icon from the media library.

Alternatives

Hard code colors in the app.

Additional Context

The app will use the icon URL and color only as labels to refer to a sprite and not actually render the color or icon. That means it is hard coded in the app for the time being for improved performance.

https://chat.tuerantuer.org/digitalfabrik/pl/p3xy3i19n3y73dzwoi9d9sjp4w

Design Requirements

[f1sh1918]

You can check here how the marker names are .f.e: culture_#07DC03 https://github.com/digitalfabrik/integreat-maplibre-style/blob/gh-pages/iconset.json there you can find the different Hexcodes for the color dropdown

Everything that is displayed on the map should be part of location:

• iconColor (string) f.e. #07DC03
• iconName (string) f.e. culture

Here are the icons that you need for cms. https://nextcloud.tuerantuer.org/index.php/f/3345504

[MizukiTemma]

@f1sh1918 12 color codes are used in the json file. Is it sufficient if a category color will be chosen from those 12 colors (per pulldown)?

Should we prevent such a case that more than one category use the same color?

[timobrembeck]

@f1sh1918 I noticed the "office.svg" image shows a law hammer, is this correct? To me, an "office" category would be more like a building, whereas the law hammer would more fit into a "legal" category?

[f1sh1918]

@f1sh1918 12 color codes are used in the json file. Is it sufficient if a category color will be chosen from those 12 colors (per pulldown)?

Should we prevent such a case that more than one category use the same color?

no its up to the user to choose an appropriate color and not to duplicate. So its fine

[f1sh1918]

@f1sh1918 I noticed the "office.svg" image shows a law hammer, is this correct? To me, an "office" category would be more like a building, whereas the law hammer would more fit into a "legal" category?

@timoludwig Well you are right but i got these icons from design. https://www.figma.com/file/R8jOFXI0hcmSXYc3c9vBmZ/Integreat-Design-Sytem---01-Style?node-id=206%3A15&t=a6Nh9OMifMAr77me-0 They could also take the house icon for office. You can contact Nikola or Toni to adjust the icons if you think they are not fitting to the current categories. I mean the icons and the categories are not bound even the icons have names! I even suggest that a max of 9 Categories should be set or we will get problems in displaying the filterbar.

[timobrembeck]

@f1sh1918 ok no problem, as long as the names are in sync with the maplibre style and the icons look the same in CMS and app, I'm fine with the slightly strange wording. Just wanted to make sure there is no misunderstanding :wink: